记 svg，css3 炫酷按钮

最新推荐文章于 2024-05-30 10:00:19 发布

星海の君

最新推荐文章于 2024-05-30 10:00:19 发布

阅读量297

点赞数

分类专栏：前端文章标签： css3 html svg css

本文链接：https://blog.csdn.net/qq_44158529/article/details/107974054

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

SVG按钮

在这里插入图片描述
话不多说，直接代码

<div class="btn">
   更多学习
   <div class="btn-long">
       <div class="long one"></div>
       <div class="long two"></div>
       <div class="long three"></div>
   </div>
   <svg width="160px" height="40px">
       <rect class="btn-rect-right" width="100%" height="100%"></rect>
       <rect class="btn-rect-left" width="100%" height="100%"></rect>
   </svg>
</div>

.btn{height: 40px;width: 120px;line-height: 40px;margin: 60px auto;position: relative;padding: 0 20px;}
.btn .btn-long{width: 40px;height: 2px;position: absolute;top: 50%;right: 10px;display: flex;}
.btn .btn-long .long{background: #000;height: 2px;transition:-webkit-all .15s ease-out;transition:all .15s ease-out;}
.btn .btn-long .one{width: 30px;}
.btn .btn-long .two{width: 4px;margin-left: 2px;}
.btn .btn-long .three{width: 2px;margin-left: 2px;}
.btn:hover .btn-long .long{margin-left: 0;}
.btn svg{fill:transparent;position: absolute;bottom: 0;left: 0;}
.btn-rect-right{stroke: #000;stroke-width:4px ;stroke-dasharray: 120 100;stroke-dashoffset: 60;transition: all .55s ease-in-out;}
.btn-rect-left{position: absolute;fill: none;stroke-width: 1px;stroke: rgba(0, 0, 0, 4);transition: all .55s  ease-in-out;}
.btn-rect-right:hover{stroke-dasharray: 120 100;stroke-dashoffset: -60;}

CSS3按钮

在这里插入图片描述
上代码

<body>
    <a href="">BUTTON</a>
    <a href="">BUTTON</a>
    <a href="">BUTTON</a>
</body>

body{display: flex;background: #000;flex-direction: column;justify-content: center;align-items: center;min-height: 100vh;}
a{position:relative;padding: 10px 30px;margin-top: 40px; color: #21ebff;text-decoration: none;font-size: 20px;transition: 0.5s; overflow: hidden;-webkit-box-reflect: below linear-gradient(transparent,#000);}
a:hover{background: #21ebff;color: #000; box-shadow:  0 0 50px #21ebff;}
a:nth-child(1){filter: hue-rotate(115deg);}
a:nth-child(3){filter: hue-rotate(270deg);}
a::before{content: '';position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-top: 2px solid #21ebff;border-left: 2px solid #21ebff;transition: 0.5s;}
a:hover::before{height: 100%;width: 100%;}
a::after{content: '';position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;border-right: 2px solid #21ebff;border-bottom: 2px solid #21ebff;transition: 0.5s;}
a:hover::after{height: 100%;width: 100%;}

即复制即用~

我是一个爱跪键盘的前端小萌新~~~

星海の君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
记 svg，css3 炫酷按钮

SVG按钮话不多说，直接代码<div class="btn"> 更多学习 <div class="btn-long"> <div class="long one"></div> <div class="long two"></div> <div class="long three"></div> </div> <svg wi
复制链接

扫一扫