如何利用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实现简单的鼠标悬停按钮”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！