如何利用css3實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)懸停按鈕

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

　　今天給大家分享一款基于css3的簡(jiǎn)單的鼠標(biāo)懸停按鈕。這款懸停按鈕鼠標(biāo)經(jīng)過前邊框是間斷的。當(dāng)鼠標(biāo)經(jīng)過的時(shí)候邊框間隔消失。效果圖如下：

　　實(shí)現(xiàn)的代碼。

　　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;
       }

到此，關(guān)于“如何利用css3實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)懸停按鈕”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！