停止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

也许您想使用margin-top代替top：

.myButton:active {
    margin-top: -1px;
}

＆＃13;

＆＃13;

.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 {
  margin-top: -1px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的按钮positioned为absolute，而click每次从top:1px转到margin-top时，使用的是负值{ {1}}。

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

  

position：absolute - 从正常文档中删除元素   流;没有为页面布局中的元素创建空间。代替，   它相对于其最近的祖先（如果有的话）定位;   否则，它相对于初始包含块放置。它的   最终位置由top，right，bottom和的值决定   左

.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>

Answer 3

只需从

中删除top:1px;即可

.myButton:active { top:1px; }

当您点击按钮并且其状态为active时，它会将您的按钮移至页面顶部。想想您的按钮何时处于活动状态时要执行的操作。 如果你想让它稍微移动1px那么你应该把它放到absolute。