运行效果

知识点

利用linear-gradient为标签增加背景渐变色
通过animation增加动画
CSS3 filter(滤镜)
给元素增加ambi-light-button类名即可实现居中流光按钮

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}body{background-color: #000;}a{text-decoration: none;}.ambi-light-button{position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 40px;background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);background-size: 400%;width: 400px;height: 100px;color: #fff;text-align: center;line-height: 100px;text-transform: uppercase; border-radius: 50px;z-index: 0;}.ambi-light-button::before{content: "";position: absolute;left: -5px;right: -5px;top: -5px;bottom: -5px;background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);background-size: 400%;border-radius: 50px;filter:blur(20px);z-index: -1;}.ambi-light-button:hover{animation: ambi 3s linear infinite;}.ambi-light-button:hover::before{animation: ambi 3s linear infinite;}@keyframes ambi {100%{background-position: -400% 0;}}</style>
</head>
<body><a href="javascript:;" class="ambi-light-button">I love 老慧</a>
</body>
</html>

CSS：实现流光按钮类相关推荐

炫彩流光按钮 html+css
话不多,先上效果: 简介: 用基础css做一个有一点炫酷的流光按钮,不止按钮,只要是盒子就行. 具体步骤: 1.先定义一个盒子当做按钮,如我就用a标签: <body><a href= ...
html流光按钮,【CSS】css实现流光效果-按钮流光显示效果-自发光
[CSS]css实现流光效果-按钮流光显示效果-自发光 [CSS]css实现流光效果-按钮流光显示效果-自发光废话不多说,直接上代码 Streamer * { padding: 0; margin: ...
炫彩流光按钮 CSS + HTML
炫彩流光按钮写在前面你若要喜爱你自己的价值,你就得给世界创造价值.--歌德效果图三个绝美的样例 HTML代码 <div class="box"><butt ...
CSS实现超级炫酷的流光按钮效果
今天从小破站看了一个大神的作品,感觉好流批,自己忍不住也做了一下. 是完全用css实现流光特效,鼠标放在上面会有光波流动这是鼠标没放在上面的颜色,放在上面的颜色太炫酷了,图片根本无法表达哈哈哈哈来 ...
收藏一个php用的一个页码按钮类
收藏一个php用的一个页码按钮类调用 $pagenav = new pagenav(); $pagenav -> pageinit(页面地址无参数的,总页数,所在页面,除1和总数中间的数量,我 ...
HTML5+CSS3小实例：炫彩的流光按钮
HTML+CSS3实现炫彩的流光按钮,是不是有点小好看,关键是代码还简单,遇到这样的按钮,我都不忍点击,就一直悬停在上面,静静欣赏它的美. 效果: <!DOCTYPE html> < ...
CSS3简单特效--animation实现流光按钮
CSS3简单特效–animation实现流光按钮在学习css3的过程中,发现很多看着炫酷的效果,利用css3的属性能很简单的实现,animation是css3动画效果中常见的属性.下面让我们了解一下 ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
HTML与CSS——闪亮霓虹按钮（你值得拥有）（完整源码）
今天,我们来学习闪亮霓虹按钮,代码中使用了CSS动画,CSS渐变以及CSS伪类等等属性,让我们来看看吧! 具体效果 HTML代码如下: <!DOCTYPE html> &l ...
Python Qt GUI设计：QPushButton、QRadioButton和QCheckBox按钮类（基础篇—12）
目录 1.QPushButton按钮类 2.QRadioButton按钮类 3.QCheckBox按钮类在GUI设计中,按钮都是最重要的和常用的触发动作请求的方式,用来与用户进行交互操作.在PyQt ...

CSS：实现流光按钮类

运行效果

知识点

代码

CSS：实现流光按钮类相关推荐

最新文章

热门文章