按钮随窗口背景变大变化而变大

这可以通过CSS中的transition属性和background-color属性来实现。

首先，我们需要在CSS中定义一个按钮样式，并为其添加transition属性，使其具有平滑的过渡效果。然后，我们需要为窗口的背景色添加一个事件监听器，当背景色发生变化时，我们使用JavaScript来更新按钮的样式。

以下是一个示例代码：

HTML:

<button class="btn">Click me</button>

CSS:

.btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

.btn:hover {
  cursor: pointer;
  background-color: #0056b3;
}

JavaScript:

const btn = document.querySelector('.btn');
const body = document.querySelector('body');

body.addEventListener('click', () => {
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  body.style.backgroundColor = randomColor;
  btn.style.backgroundColor = randomColor;
});

在这个示例中，我们给按钮添加了一个hover样式，当鼠标悬停在按钮上时，它会变成深蓝色。我们还使用JavaScript添加了一个事件监听器，当单击窗口时，窗口的背景色会随机更改，并且按钮的背景色也会相应地更改。使用transition属性，按钮的背景色会平滑地过渡到新的颜色，从而实现了按钮随窗口背景变化而变化的效果。