今天给大家分享一款基于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> <h1> <a href="#" class="btn3">A Huge Link</a></h1>
css3代码：
body { font-family: "Courier New" , "Inconsolata" , monospace; font-size: 18px; line-height: 26px; background: #333; color: #fff; } h1 { 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; }
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
941
收藏
