本文主要是介绍【前端设计】流光按钮，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
欢迎来到前端设计专栏，本专栏收藏了一些好看且实用的前端作品，使用简单的html、css语法打造创意有趣的作品，为网站加入更多高级创意的元素。
css
body{height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #000;
}
.icon button{position: relative;display: inline-block;border: none;width: 200px;height: 60px;background-color: skyblue;color: #fff;line-height: 60px;text-align: center;text-decoration: none;background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);background-size: 400%;border-radius: 10px;}@keyframes animate {0%{background-position: 0 0;}100%{ background-position: 400% 0;}
}.icon button{animation: animate 8s linear infinite;
}/* //添加光影 */
.icon button:before{content: '';position: absolute;left: -5px;top: -5px;right: -5px;bottom: -5px;z-index: -1;background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);background-size: 400%;border-radius: 10px;opacity: 0;transition: all 1s;
}
.icon button:hover:before{filter: blur(20px);opacity: 1;
}html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="流光按钮.css">
</head>
<body><div class="icon"><button href="#">Button</button></div>
</body>
</html>这篇关于【前端设计】流光按钮的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
