先看效果图：
实现简单炫酷，直接复制查看效果
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>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
网址设置
网址样式切换
详细
网址卡片按钮
显示
布局设置
左侧边栏菜单
展开
搜索框设置
自定义搜索框背景
-
骑行
-
风景
自定义搜索框高度
- 聚焦
- 信息
- 默认
自定义设置
爱导航，集网址、资源、资讯于一体的 书签导航，简约优雅的设计风格，全面的前端用户功能，简单的模块化配置，欢迎您的体验，导航看看小提示：按 Ctrl+D 可收藏本网页，方便下一次快速打开使用。本站仅为网址导航，网站来源于网络，对其内容不负任何责任，若有问题，请联系我们。
