'Click' 按钮的动画效果 CSS

Question

我无法在“下一步”按钮中实现点击效果（请参阅片段 1）。

在第一个片段中，它是用 float: left; 值实现的，但是当我将它插入我的代码时，它打破了按钮的位置。我的 'Next' 按钮应该是第二个片段的方式，即垂直和水平居中。

有什么想法可以在这里找到解决方法吗？

片段 1

.next-button {
  transition: all 0.1s;
 -webkit-transition: all 0.1s;
 position: relative;
 padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
 border-radius: 10px;
 font-family: 'Montserrat';
 font-size: 25px;
 color: #ffffff;
 text-decoration: none;
  background-color: #f9c60f;
 border-bottom: 5px solid #888888;
 text-shadow: 1px -2px #888888;
}

.next-button:active {
 transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
 border-bottom: 1px solid;
}

<html lang="en">
<head>
  <body>
  <a href="#" class="next-button">NEXT</a>
</body>
</html>

片段 2（我的代码）

.next-button {
  transition: all 0.1s;
 -webkit-transition: all 0.1s;
 position: relative;
 padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
 border-radius: 10px;
 font-family: 'Montserrat';
 font-size: 25px;
 color: #ffffff;
 text-decoration: none;
  background-color: #f9c60f;
 border-bottom: 5px solid #888888;
 text-shadow: 1px -2px #888888;
}.course-video {
    background: #f9c70f;
    border: none;
    margin: 0;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
    border-radius: 0;
    -moz-border-radius: 0;
   
}

.next-video-button {
  transition: all 0.1s;
 -webkit-transition: all 0.1s;
 padding:7px 200px;
 border-radius: 10px;
 font-family: 'Montserrat';
 font-size: 1em;
 color: #ffffff;
 text-decoration: none;
  background-color: #888888;
 border-bottom: 5px solid #5a5a5a;
 text-shadow: 1px -2px #888888;
  text-align: center;
  line-height:49px;
  

}

.next-video-button:active {
 transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
 border-bottom: 1px solid;
}

.video-title {
  font-family: montserrat;
  font-size: 1.5em;
  color: #000000;
  padding: 0.5em;
  box-sizing: border-box;
  width: 854px;
  text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}

.video-descr {
  width: 854px;
  box-sizing: border-box;
  height: 50px;
  margin-top: -5px;
   text-align:center;
}

.next-button:active {
 transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
 border-bottom: 1px solid;
}

<div class="course-video video-title">Hello</div>
<iframe src="https://player.vimeo.com/video/154094373" width="854" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="course-video video-descr"><a href="#" class="next-video-button">NEXT</a></div>

Answer 1

尝试使用

.next-video-button {
   display:inline-block;
   ...
}

而不是

float:left

使用 inline-block 使元素表现得像文本一样，因此您的文本对齐方式也适用于这些元素

'Click' 按钮的动画效果 CSS

'Click' animation effect on button with CSS

html

css

button

css-float