用CSS点击'按钮上的动画效果

我无法在我的下一步按钮中实现点击效果（请参阅片段1）。用CSS点击'按钮上的动画效果

在第一个片段中，它的值为float: left;，但是当我将它插入到我的代码中时，它会打破按钮的位置。我的“下一步”按钮应该是第二个片段的方式，即垂直和水平居中。

任何想法如何在这里找到解决方法？

片段1

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

 
.next-button:active { 
 
\t transform: translate(0px,5px); 
 
    -webkit-transform: translate(0px,5px); 
 
\t 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; 
 
\t -webkit-transition: all 0.1s; 
 
\t position: relative; 
 
\t padding: 10px 40px; 
 
    margin: 0px 10px 10px 0px; 
 
    float: left; 
 
\t border-radius: 10px; 
 
\t font-family: 'Montserrat'; 
 
\t font-size: 25px; 
 
\t color: #ffffff; 
 
\t text-decoration: none; 
 
    background-color: #f9c60f; 
 
\t border-bottom: 5px solid #888888; 
 
\t 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; 
 
\t -webkit-transition: all 0.1s; 
 
\t padding:7px 200px; 
 
\t border-radius: 10px; 
 
\t font-family: 'Montserrat'; 
 
\t font-size: 1em; 
 
\t color: #ffffff; 
 
\t text-decoration: none; 
 
    background-color: #888888; 
 
\t border-bottom: 5px solid #5a5a5a; 
 
\t text-shadow: 1px -2px #888888; 
 
    text-align: center; 
 
    line-height:49px; 
 
    
 

 
} 
 

 
.next-video-button:active { 
 
\t transform: translate(0px,5px); 
 
    -webkit-transform: translate(0px,5px); 
 
\t 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 { 
 
\t transform: translate(0px,5px); 
 
    -webkit-transform: translate(0px,5px); 
 
\t 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>

来源

2016-11-30 Ira

尝试使用

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

代替

float:left

使用inline-block让喜欢它的要素行为是文本，以便您的文本对齐将在这些工作，以及

来源

2016-12-01 00:00:55 Beno

它的工作！非常感谢！ – Ira

用CSS点击'按钮上的动画效果

回答

相关问题