3种简单又好看的·按钮效果 _样品

在B站看到了几个好看的按钮特效，分享给大家。第一个样品展示
代码部分
按钮·彩色* {/* 初始化设置 */padding: 0;margin: 0;}body {/* 弹性布局让页面元素垂直+水平居中 */display: flex;justify-content: center;align-items: center;/* 让页面占屏幕的总高 */height: 100vh;background-color: #000;}a {position: relative;width: 400px;height: 100px;line-height: 100px;/* 设置字体 */text-align: center;text-decoration: none;text-transform: uppercase;font-size: 24px;color: #fff;/* 圆角属性 */border-radius: 50px;/* 背景颜色 */background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);background-size: 400%;z-index: 1;}/* 下面是发光效果 */a::before{content: '';position: absolute;top: -5px;left: -5px;bottom: -5px;right: -5px;border-radius: 50px;border-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3d, #09a8f4);background-size: 400%;/* 元素的位置 -底层或+顶层 */z-index: -1;filter: blur(20px);}a:hover::before{animation: sun 8s infinite;}a:hover{/* 动画名称时间 infinite是无限播放 */animation: sun 8s infinite;}@keyframes sun{100%{/* 背景位置 */background-position: -400% 0;}}GE.button
第二个
(和第一个有区别自己去试一下吧！)
样品展示
代码部分
按钮* {margin: 0;padding: 0;text-decoration: none;}body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: black;color: white;}a {display: inline-block;padding: 1em 2em;margin: 10px;background-color: white;border-radius: 40px;/* 设置字符 */letter-spacing: 2px;font-size: 18px;background: linear-gradient(90deg, #0162c8, #55e7fc);position: relative;overflow: hidden;}a:hover {color: #aa0000;}a:nth-child(2) {background: linear-gradient(90deg, #755bea, #ff72c0);}span {background-color: #FFFFFF;position: absolute;transform: translate(-50%, -50%);animation: move 1s linear infinite;border-radius: 50%;pointer-events: none;}@keyframes move {from {width: 0;height: 0;opacity: .7;}to {width: 500px;height: 500px;opacity: 0;}}点赞了吗？关注可以吗！
第三个样品样式
我把CSS、写在一起了方便大家复制，可以吧！
代码部分
【3种简单又好看的·按钮效果】开关Document* {margin: 0;padding: 0;}body {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #ffffff;}/* 按钮的设置 *//* 有两个是因为 JS可以调用 */.open_bulb {width: 250px;height: 50px;outline: none;border: 2px solid black;border-radius: 10px;background-color: transparent;font-size: 16px;}.close_bulb {width: 250px;height: 50px;outline: none;border: 2px solid white;color: white;background-color: transparent;border-radius: 10px;font-size: 16px;}