Question

我有一个可爱的小按钮的代码

<html>
<head>
<style>
button {
color: white;
font: 18px verdana;
background-color: #6fcafc;
border-style: solid;
border-bottom-color: #60b3e0;
border-width: 0px;
border-bottom-width: 7px;
border-radius: 12px;
padding: 5px;
}
button:active {
border-bottom-width: 0px;
position: relative;
top: 7px;
}
button:focus {
outline: none;
}
</style>
</head>
<body>
<button>Click Me!</button>
<br>
Text that might be here.
</body>
</html>

当我推动它时，它会上下移动。但是，由于它如何使用按钮向下移动并删除边框，当我单击它时，下面的文本向上移动。有人可以向我解释如何解决这个问题吗？

提前谢谢！

Answer 1

您可以在按钮上添加margin-bottom，以抵消top值。

＆＃13;

button {
  color: white;
  font: 18px verdana;
  background-color: #6fcafc;
  border-style: solid;
  border-bottom-color: #60b3e0;
  border-width: 0px;
  border-bottom-width: 7px;
  border-radius: 12px;
  padding: 5px;
  position: relative;
}

button:active {
  border-bottom-width: 0px;
  top: 7px;
  /* added */
  margin-bottom: 7px;
}

button:focus {
  outline: none;
}

＆＃13;

<button>Click Me!</button>
<br> Text that might be here.

＆＃13;

Answer 2

当按钮处于活动状态时，您可以添加相同数量的border-bottom-width

＆＃13;

button {
color: white;
font: 18px verdana;
background-color: #6fcafc;
border-style: solid;
border-bottom-color: #60b3e0;
border-width: 0px;
border-bottom-width: 7px;
border-radius: 12px;
padding: 5px;
}
button:active {
border-bottom-width: 7px;
position: relative;
top: 7px;
}
button:focus {
outline: none;
}

＆＃13;

<body>
<button>Click Me!</button>
<br>
Text that might be here.
</body>

＆＃13;

如何使这个按钮不会扰乱周围环境

2 个答案: