css - 停止css按钮在点击时改变位置

Question

我正在使用 CSS 定位按钮，但每当我单击该按钮时，它都会一直移动到顶部并返回到它的位置。我怎样才能阻止它发生？

.myButton {
	background-color:#4b4d4c;
	border:1px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:11px 76px;
	text-decoration:none;
   margin: 0;
   position: absolute;

    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);

}
.myButton:hover {
	background-color:#373838;
}
.myButton:active {

	top:1px;
}

            <div>
              <br>
            </div>
            <div>
               <br>
            </div>
            <div>
              <br>
            </div>
            <div>
            <br>
            </div>
            <a href="#" class="myButton">More ></a>

Answer 1

您的按钮定位为绝对，每次当您点击时，它都会到达top:1px 从它的分配或翻译位置，而不是使用 margin-top 的负值。

.myButton:active {
  /*top: 1px;*/ /*Remove this*/
  margin-top:-1px;
}

position:absolute - The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

.myButton {
  background-color: #4b4d4c;
  border: 1px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 17px;
  padding: 11px 76px;
  text-decoration: none;
  margin: 0;
  position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0);
}

.myButton:hover {
  background-color: #373838;
}

.myButton:active {
  /*top: 1px;Remove this*/
  margin-top:-1px;
}

<div>
  <br>
</div>
<div>
  <br>
</div>
<div>
  <br>
</div>
<div>
  <br>
</div>
<a href="#" class="myButton">More ></a>