如何利用css3實現簡單的鼠標懸停按鈕

這篇文章主要介紹“如何利用css3實現簡單的鼠標懸停按鈕”，在日常操作中，相信很多人在如何利用css3實現簡單的鼠標懸停按鈕問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何利用css3實現簡單的鼠標懸停按鈕”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　今天給大家分享一款基于css3的簡單的鼠標懸停按鈕。這款懸停按鈕鼠標經過前邊框是間斷的。當鼠標經過的時候邊框間隔消失。效果圖如下：

　　實現的代碼。

　　html代碼：

代碼如下:

<div class="container">
       <p>
           Single gradient border</p>
       <a href="#" class="btn">Click Me!</a> <a href="#" class="btn">Very long link text here</a>
   </div>
   <div class="container">
       <p>
           Pseudo elements at a fixed size. Nasty 1px drop on hover</p>
       <a href="#" class="btn2">Click Me!</a> <a href="#" class="btn2">Very long link text
           here</a>
   </div>
   <div class="container">
       <p>
           Multiple borders using pseudo elements with gradient borders</p>
       <a href="#" class="btn3">Click Me!</a> <a href="#" class="btn3">Very long link text
           here</a>
   </div>
   <h2>
       <a href="#" class="btn3">A Huge Link</a></h2>

　　css3代碼：

代碼如下:

body
       {
           font-family: "Courier New" , "Inconsolata" , monospace;
           font-size: 18px;
           line-height: 26px;
           background: #333;
           color: #fff;
       }
       h2
       {
           font-weight: 100;
           font-size: 80px;
           line-height: 90px;
           text-align: center;
       }
       .container
       {
           width: 800px;
           margin: 50px auto;
           text-align: center;
       }
       .btnCommon
       {
           display: inline-block;
           text-decoration: none;
           color: #fff;
           padding: 8px 16px;
           margin: 0 10px;
           border: 1px solid #fff;
           letter-spacing: 1px;
       }
       .btnCommon:hover
       {
           text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
       }
       .btn
       {
           display: inline-block;
           text-decoration: none;
           color: #fff;
           padding: 8px 16px;
           margin: 0 10px;
           border: 1px solid #fff;
           letter-spacing: 1px;
           border-image: linear-gradient(to right, #ffffff 15%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, #ffffff 85%) 1;
           transition: all .2s;
       }
       .btn:hover
       {
           text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
       }
       .btn:hover
       {
           transition: all .2s;
           background: rgba(255, 255, 255, 0.2);
           border: 1px solid #fff;
       }
       .btn2
       {
           display: inline-block;
           text-decoration: none;
           color: #fff;
           padding: 8px 16px;
           margin: 0 10px;
           border: 1px solid #fff;
           letter-spacing: 1px;
           border: none;
           height: 40px;
           line-height: 40px;
           position: relative;
           padding: 0;
           margin: 0 25px;
       }
       .btn2:hover
       {
           text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
       }
       .btn2:before, .btn2:after
       {
           width: 15px;
           border: 1px solid #fff;
           position: absolute;
           content: "";
           height: 40px;
           top: -1px;
       }
       .btn2:before
       {
           left: -16px;
           border-right: none;
       }
       .btn2:after
       {
           right: -16px;
           border-left: none;
       }
       .btn2:hover, .btn2:hover:before, .btn2:hover:after
       {
           transition: all .2s;
           background: rgba(255, 255, 255, 0.2);
           border-color: pink;
       }
       .btn2:hover
       {
           border: 1px solid pink;
           border-width: 1px 0 1px 0;
       }
       .btn3
       {
           display: inline-block;
           text-decoration: none;
           color: #fff;
           padding: 8px 16px;
           margin: 0 10px;
           border: 1px solid #fff;
           letter-spacing: 1px;
           position: relative;
           border: 1px solid rgba(0, 0, 0, 0);
           transition: all .2s;
       }
       .btn3:hover
       {
           text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
       }
       .btn3:before, .btn3:after
       {
           display: inline-block;
           width: 100%;
           height: 100%;
           content: "";
           position: absolute;
           left: -1px;
           top: -1px;
           border-width: 1px;
           transition: all .2s;
       }
       .btn3:before
       {
           border-image: linear-gradient(to right, #ffffff 30px, rgba(0, 0, 0, 0) 16px) 1;
       }
       .btn3:after
       {
           border-image: linear-gradient(to left, #ffffff 30px, rgba(0, 0, 0, 0) 16px) 1;
       }
       .btn3:hover
       {
           transition: all .2s;
           background: rgba(255, 255, 255, 0.2);
       }
       .btn3:hover:before, .btn3:hover:after
       {
           border: 1px solid rgba(0, 0, 0, 0);
           transition: all .2s;
       }

到此，關于“如何利用css3實現簡單的鼠標懸停按鈕”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！