炫彩流光按钮 CSS + HTML

炫彩流光按钮

写在前面

你若要喜爱你自己的价值，你就得给世界创造价值。——歌德

效果图

三个绝美的样例

HTML代码

<div class="box"><button class="btn">button</button>
</div>

实现过程

给按钮添加一个渐变的背景颜色
将背景的大小放大到原来的若干倍，可以自己设定，这样做是为了让渐变的效果更明显，同时后续实现流光的效果
给字体设置text-shadow属性，多设置几个可以增加亮度
当鼠标经过时，实现流光的效果，通过动画改变背景的位置来实现，相当于拖动背景，让按钮显示不一样的颜色
当鼠标经过时添加光晕的效果，通过伪元素，建一个比原先按钮大一点的盒子，先利用透明度为0隐藏起来，当鼠标经过时，改变透明度为1，同时设置filter属性，添加模糊距离，从而实现光晕的效果

CSS代码

@keyframes move {0% {background-position: 0%;}100% {background-position: 100%;}
}
.btn {position: relative;width: 300px;height: 110px;color: white;line-height: 80px;font-size: 60px;font-family: sans-serif;text-transform: uppercase;//转化为大写字母text-align: center;border-radius: 40px;background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));background-size: 400%;border: none;outline: none;text-shadow: 0 0 3px white,0 0 3px white,0 0 3px white;//加亮z-index: 1;
}
.btn:hover {animation: move 2s linear alternate infinite;
}
.btn::before {content: '';position: absolute;top: -5px;left: -5px;width: 310px;height: 120px;background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));background-size: 400%;opacity: 0;border-radius: 45px;transition: .6s;z-index: -1;
}
.btn:hover::before {filter: blur(10px);opacity: 1;animation: move 2s linear alternate infinite;
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>炫彩流光</title><style>@keyframes move {0% {background-position: 0%;}100% {background-position: 100%;}}* {margin: 0;padding: 0;}body {background-color: black;}.box {width: 400px;height: 400px;margin: 100px auto;}.btn {position: relative;width: 300px;height: 110px;color: white;line-height: 80px;font-size: 60px;font-family: sans-serif;text-transform: uppercase;//转为大写字母text-align: center;border-radius: 40px;background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));background-size: 400%;border: none;outline: none;text-shadow: 0 0 3px white,0 0 3px white,0 0 3px white;z-index: 1;}.btn:hover {animation: move 2s linear alternate infinite;}.btn::before {content: '';position: absolute;top: -5px;left: -5px;width: 310px;height: 120px;background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));background-size: 400%;opacity: 0;border-radius: 45px;transition: .6s;z-index: -1;}.btn:hover::before {filter: blur(10px);opacity: 1;animation: move 2s linear alternate infinite;}</style>
</head>
<body><div class="box"><button class="btn">button</button></div>
</body>
</html>

End

以上就是炫彩流光按钮的全部内容了

先相信自己，然后别人才会相信你。——罗曼·罗兰

炫彩流光按钮 CSS + HTML相关推荐

炫彩流光按钮 html+css
话不多,先上效果: 简介: 用基础css做一个有一点炫酷的流光按钮,不止按钮,只要是盒子就行. 具体步骤: 1.先定义一个盒子当做按钮,如我就用a标签: <body><a href= ...
炫彩流光文字 html+css
效果: 实现: 1. 定义标签,各自作用看后面解析: <main><h1 class="txt">live on.</h1><h1 cla ...
炫彩流光CSS特效按钮
炫彩流光CSS特效按钮教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载效果图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存 ...
3D酷炫扭动卡片 html+css+js
看效果,动起来~: 实现: 1. 定义标签,.card是底层盒子,.card2是呈现卡片效果的盒子,然后里面就是一些图片和文字,字体图标的标签了.: <div class="card& ...
Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思实现效果超级炫酷实现原理创建小球给小球添加随机颜色,随机半径鼠标移动通过实例化,新增小球通过调用给原型新增的方法,来实现小球的动画 ...
HTML5+CSS3小实例：炫彩的流光按钮
HTML+CSS3实现炫彩的流光按钮,是不是有点小好看,关键是代码还简单,遇到这样的按钮,我都不忍点击,就一直悬停在上面,静静欣赏它的美. 效果: <!DOCTYPE html> < ...
HTML+CSS制作炫彩的数字时钟
HTML+CSS制作炫彩的数字时钟效果图如下: HTML部分代码如下: <!DOCTYPE html> <html lang="zh-Hans">< ...
Web前端——用CSS的常用样式制作一个炫酷的按钮
文章目录笔记:CSS的常用样式炫酷按钮效果实现笔记:CSS的常用样式边框以及弧度样式 border-width:边框的线条宽度. border-style:边框的样式,例如 solid实现 d ...
炫彩界面库v1.4.2-360安全卫士v8.5-UI设计器使用教程
炫彩界面库-UI设计器使用教程,该教程以360安全卫士为例. 先上一张最终程序截图文件相对路径 -说明文件的相对路径为UI设计器的路径;例如在UI设计器目录中有个UI项目文件夹[MyProject ...

炫彩流光按钮 CSS + HTML

炫彩流光按钮

写在前面

效果图

HTML代码

实现过程

CSS代码

完整代码

End

炫彩流光按钮 CSS + HTML相关推荐

最新文章

热门文章