我无法在“下一步”按钮中实现点击效果(请参阅片段 1)。
在第一个片段中，它是通过 float: left; 值实现的，但是当我将它插入到我的代码中时，它打破了按钮的位置。我的“下一步”按钮应该是第二个片段的方式，即垂直和水平居中。
关于如何在这里找到解决方法的任何想法？
片段 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>最佳答案
尝试使用
.next-video-button {
display:inline-block;
...
}
代替
float :左
使用 inline-block 使元素表现得像文本一样，因此您的文本对齐方式也适用于这些元素
关于html - 使用 CSS 对按钮进行“单击”动画效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40900218/