css hover2:
<!-- 按钮特效 -->
<a class="video-btn" href="###">
<span class="video-ico">Video icon</span>
<span>Watch Video<span>What and how we work</span></span>
</a>
<style type="text/css">
a.video-btn { color: #3399cc; text-decoration: none;}
a.video-btn:hover, a.video-btn:focus { color: #8ab206; text-decoration: none;}
a:active, a:hover { outline: 0;}
a, input[type="button"], input[type="submit"], button {
-moz-transition: background 550ms cubic-bezier(0.45, 1, 0.32, 1), color 550ms cubic-bezier(0.45, 1, 0.32, 1);
-webkit-transition: background 550ms cubic-bezier(0.45, 1, 0.32, 1), color 550ms cubic-bezier(0.45, 1, 0.32, 1);
-o-transition: background 550ms cubic-bezier(0.45, 1, 0.32, 1), color 550ms cubic-bezier(0.45, 1, 0.32, 1);
-ms-transition: background 550ms cubic-bezier(0.45, 1, 0.32, 1), color 550ms cubic-bezier(0.45, 1, 0.32, 1);
transition: background 550ms cubic-bezier(0.45, 1, 0.32, 1), color 550ms cubic-bezier(0.45, 1, 0.32, 1);
}
.video-btn {
background: #fff;
padding: 15px 35px;
border-radius: 50px;
box-shadow: 0 25px 55px rgba(0, 0, 0, 0.15);
display: inline-block;
margin-top: 33px;
-moz-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
-webkit-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
-o-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
-ms-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
border: solid 1px transparent;
}
.video-btn:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.07);
border: solid 1px rgba(0, 0, 0, 0.075);
}
.video-btn:hover .video-ico {
border: 7px solid #fff;
background: #3399cc;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
width: 53px;
height: 53px;
}
.video-btn:hover .video-ico::before {
background: #3399cc;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
transform: scale(0, 0);
}
.video-btn:hover span { color: #3399cc;}
.video-btn:hover span span { color: #929292;}
.video-btn .video-ico {
float: left;
width: 61px;
height: 61px;
border-radius: 50%;
border: 1px solid #dcdcdc;
margin: 0 15px 0 -15px;
position: relative;
text-indent: -999em;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
transition: all 300ms;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.07);
}
.video-btn .video-ico::before{
-moz-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
-webkit-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
-o-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
-ms-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
content: "";
width: 43px;
height: 43px;
border-radius: 50%;
background: #8ab206;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.video-btn .video-ico::after {
content: "";
width: 0;
height: 0;
position: absolute;
left: 4px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-left: 10px solid #fff;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
.video-btn span {
display: block;
overflow: hidden;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-weight: bold;
color: #8ab206;
-moz-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
-webkit-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
-o-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
-ms-transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
transition: all 550ms cubic-bezier(0.45, 1, 0.32, 1);
text-transform: uppercase;
font-size: 19px;
text-align: left;
margin-top: 7px;
}
.video-btn span span {
font-family: 'Hind', Arial, Helvetica, sans-serif;
text-transform: none;
font-size: 14px;
color: #929292;
font-weight: normal;
margin-top: 0;
}
</style>
效果: