WordPerss-OneNav主题美化按钮代码 css 流光按钮

教程 12个月前 壳壳
939 0 0
最后更新于2022年3月20日,已超过262天没有更新,如果内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

先看效果图:

WordPerss-OneNav主题美化按钮代码 css 流光按钮

实现简单炫酷,直接复制查看效果

CSS:
<style>
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 230px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
font-size: 25px;
text-transform: uppercase;
cursor: pointer;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 60px;
}

.btn:hover {
animation: animate 8s linear infinite;
}

@keyframes animate {
0% {
background-position: 0%;
}

100% {
background-position: 400%;
}
}

.btn::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}

.btn:hover::before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
</style>

 

<body> <b href="#" class="btn">button</b> </body>
版权声明:壳壳 发表于 2021年12月22日 pm10:43。
转载请注明:WordPerss-OneNav主题美化按钮代码 css 流光按钮 | 壳壳博客

相关文章

暂无评论

暂无评论...
壳壳博客一键登录开启个人书签等功能!