一个炒鸡酷炫的按钮！流光特效！进来把代码拿走！

2023-11-18 12:04| 来源: 网络整理| 查看: 265

我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

按钮是前端处理用户交互的常用元素，原生的按钮可以说是极其丑陋。。。在实践过程中，经常需要针对按钮样式进行优化，今天的主题就是，用纯纯的css3实现一个酷炫的按钮

丑陋的原生按钮

我的酷炫按钮

食用说明

鼠标移入button内即可查看流光效果，基于伪类元素、背景渐变、动画实现，需要直接显示流光效果的，请将hover内的代码移入正常状态代码内

实现步骤页面上放两个原生的button元素，至于为什么是俩，因为我想写两种特效。。。 2.先针对页面布局编写css,这里为了省事，使用了通配符选择器，实际生产中不建议这样使用，因为涉及到元素很多的时候，通配符选择器会造成不必要的渲染开销。 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; }

3.背景置为深色背景，为什么是深色背景因为我觉得这样效果更好看,这里采用的是,这个选择器表示a,b均采用如下样式，这里仅仅是为了布局，你想的话，用flex也是可以的

html,body { display: grid; height: 100%; overflow: hidden; place-items: center; background: #000; }

4.针对button的初始样式进行优化

button { position: relative; height: 60px; width: 200px; margin: 0 35px; border-radius: 50px; border: none; outline: none; background: #111; color: #fff; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; } 通过伪类制造模糊效果 button:first-child::before, button:last-child::before { content: ''; position: absolute; background: inherit; top: -5px; right: -5px; bottom: -5px; left: -5px; border-radius: 50px; filter: blur(20px); opacity: 0; transition: opacity .5s; }

6.hover展现流光特效

button:first-child:hover { background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; } button:last-child:hover { background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199); background-size: 400%; } button:first-child:hover:before, button:last-child:hover:before { opacity: 1; z-index: -1; } button:hover { z-index: 1; animation: glow 8s linear infinite; } @keyframes glow { 0% { background-position: 0%; } 100% { background-position: 400%; } }

OK，到现在，我们已经成功实现了酷炫流光按钮，点赞收藏拿走。。。

【本文地址】

公司简介

联系我们