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>

教程 # css # 代码 # 技术 # 教程 # 美化

本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。
如果用于其他用途，请购买正版支持作者，谢谢！若您认为「KKOK.CC」发布的内容若侵犯到您的权益，请联系站长邮箱:ezuw@qq.com 进行删除处理。
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。