css hover特效

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>

效果：

 

来源：CSDN

作者：Bonjours

链接：https://blog.csdn.net/Bonjours/article/details/103663533