html - 如何使 HTML 按钮响应

Question

这是我正在制作的基本网站的代码。我正在为一个学校元素做这件事。

.html-button {
  font-family: 'Hammersmith One', sans-serif;
  font-size: 20px;
  color: white;
  position: absolute;
  top: 55%;
  left: 45%;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  -webkit-border-radius: 8;
  border-radius: 8px;
  font-size: 21px;
  background: #42A5F6;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  -webkit-transition-duration: 0.7s;
  /* Safari */
  transition-duration: 0.7s;
  border: none;
  cursor: pointer;
}
.html-button:hover {
  background: #0090FF;
  text-decoration: none;
  color: black;
}
.css-button {
  font-family: 'Hammersmith One', sans-serif;
  font-size: 20px;
  color: white;
  position: absolute;
  top: 55%;
  left: 55.3%;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  -webkit-border-radius: 8;
  border-radius: 8px;
  font-size: 21px;
  background: #42A5F6;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  -webkit-transition-duration: 0.7s;
  /* Safari */
  transition-duration: 0.7s;
  border: none;
  cursor: pointer;
}
.css-button:hover {
  background: #0090FF;
  text-decoration: none;
  color: black;
}

<button class="html-button" role="button">VIEW HTML</button>
<button class="css-button" role="button">VIEW CSS</button>

这不是我的全部代码，但这是我在这里关注的主要部分。这将在我的屏幕上显示 2 个单独的按钮(用 CSS 装饰)，它们之间的长度恰到好处，但是目前，当我缩小浏览器时，按钮会随着浏览器变小而靠得更近，我该如何防止这种情况发生？

Answer 1

发生这种情况是因为您已经绝对定位了按钮。有一种更简洁的方法可以用更少的代码来做到这一点。我建议将它们都放在一个 div 中，然后将其放置在您想要的位置，如下所示:

HTML:

<div class="buttons">
  <button class="button" role="button">VIEW HTML</button>
  <button class="button" role="button">VIEW CSS</button>
</div>

CSS:

.buttons {
  text-align: center;
  position: relative;
  top: 300px;
}
.button {
  font-family: 'Hammersmith One', sans-serif;
  font-size: 20px;
  color: white;
  text-align: center;
  border-radius: 8px;
  font-size: 21px;
  background: #42A5F6;
  padding: 10px 20px 10px 20px;
  border: none;
}
.button:hover {
  background: #0090FF;
  color: black;
}