用HTML和CSS制作超级好看的流光效果按钮

STPace 2020-05-07

首先按钮效果如下

用HTML和CSS制作超级好看的流光效果按钮

HTML代码和CSS代码：

HTML:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>流光按钮</title>    <link rel="stylesheet" href="index01.css"></head><body><a href="javascript:;" >究极无敌好看</a></body></html>CSS:
*{    margin: 0px;    padding: 0px;}body{    background: #000;}a{    text-decoration: none;    position: absolute;    left: 50%;    top:50%;    transform: translate(-50%,-50%);    font-size: 30px;    line-height: 100px;    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f3);    background-size: 400%;    width: 400px;    height: 100px;    color: #ffffff;    text-align: center;    border-radius:50px ;    z-index: 1;}a::before{    content: "";    position: absolute;    left: -5px;    right: -5px;    top: -5px;    bottom: -5px;    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f3);    background-size: 400%;    border-radius: 50px;    filter: blur(20px);    z-index: -1;}a:hover::before{    animation: sun 8s infinite;}a:hover{    animation: sun 8s infinite;}@keyframes sun {    100%{        background-position: -400% 0;    }}
 
 
 
 
 
  STPace  
 
 
  STPace  
 
 
 
 
 
  
 
 
 
 
相关推荐
  
 
 
  纯CSS实现密室逃脱游戏  
 
 
 
     “密室逃脱”这个词想必大家并不陌生，在以前的flash时代，这是一类很经典的益智游戏之一。玩家常常会被困在一间密室中，而过关的目的就是想法设法逃出这件密室。接下来，笔者要用纯CSS实现一款类似的密室逃脱类游戏。是的，你没听错，纯CSS，也就意味着完全没有J   
 
 
 qiupu  / 0评论  2020-11-04  
 
  
 
 
  一篇文章带你了解CSS对齐方式  
 
 
 
     将块元素水平居中对齐 , 使用 margin: auto;设置元素的宽度将阻止它伸展到容器的边缘。将元素内部的文本居中, 使用text-align: center;对齐元素的一种方法是使用 position: absolute;在我年轻而脆弱的岁月里，父亲   
 
 
 多读书读好书  / 0评论  2020-11-03  
 
  
 
 
  Node Sass 弃用，以 Dart Sass 代替  
 
 
 
     就在今天，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart  Sass。读完本文以下问题将会得到解答。那么为什么会有这次改动呢?之后 Node Sass 还维护吗?Dart S   
 
 
 RedCode  / 0评论  2020-10-28  
 
  
 
 
  CSS元素选择器是怎样运作的？  
 
 
 
     在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的  SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢?CSS   
 
 
 jiedinghui  / 0评论  2020-10-25  
 
  
 
 
  CSS(Cascading Style Sheets)样式更改——过渡、动画  
 
 
 
     元素从一种样式逐渐改变为另一种的样式。cubic-bezier在cubic-bezie函数中定义自己的值，可能的值是0至1之间的数值   
 
 
 Ladyseven  / 0评论  2020-10-22  
 
  
 
 
  多个你不知道的 CSS 居中方案！  
 
 
 
     要使内联元素居中，使用 text-align: center 足够了。对于多个内联的项目，也可以正常工作。使用网格容器时，图中的盘子将根据其网格区域居中。请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。宽度和高度已知的块元素可以通过设置mar   
 
 
 hellowzm  / 0评论  2020-10-12  
 
  
 
 
  540 CSS3属性对层叠上下文的影响  
 
 
 
     -- 案例二分解:opacity -->   
 
 
 impress  / 0评论  2020-10-07  
 
  
 
 
  如何在Shadow DOM/Web组件中覆盖CSS  
 
 
 
     Web组件的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。影子DOM为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入外界的方法。   
 
 
 zuncle  / 0评论  2020-09-28  
 
  
 
 
  超越媒体查询：使用更新的HTML和CSS功能进行响应式设计  
 
 
 
     在本文中，我们将探讨许多可用的工具，从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。事实上，媒体查询与这些功能一起使用时，更多的是成为一种补充，而不是完整的方法。让我们来看看是如何运作的。图像可能会变形到失去焦点的程度。较小   
 
 
 Ladyseven  / 0评论  2020-09-11  
 
  
 
 
  5个好用的 CSS 函数  
 
 
 
     CSS 包含了许多函数，而且它能够完成许多早期需要用  JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。CSS  函数是它所具有的最强大的特性之一，在本文中，我将介绍一些我认为有   
 
 
 jiedinghui  / 0评论  2020-09-07  
 
  
 
 
  使用这些不太常用的 CSS 属性，让我在前端布局效率上，又提高了一个层次！  
 
 
 
     有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS  一个属性就能搞定了，这可以大大节约我们编码的时间。作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么   
 
 
 xiaohuli  / 0评论  2020-09-02  
 
  
 
 
  16个非常有用的CSS伪选择器，你千万不要错过了！  
 
 
 
     熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。这个伪元素选择器选择换行之前文本的首行。这个伪元素选择器应用于元素中文本的首字母。应用于任何被用户选中的高亮区域。在 HTML 中，为 HTML 元素。这个规则将应   
 
 
 葉無聞  / 0评论  2020-09-01  
 
  
 
 
  总结一些，我在书写 CSS 的时候，经常犯的错误！  
 
 
 
     当我们非常专注写代码时候，我们往往会无意识的写出一些无效CSS代码。我把这种称为 “潜意识错误”。不过，这些错误都比较好解决，不需要花很多时间，只要纠正一下就行了。跟着本文看看，我会经常写哪些有趣的 CSS 错误。/*现这一点并不容易，你们看出错误在哪里吗   
 
 
 impress  / 0评论  2020-08-26  
 
  
 
 
  一个思路，如何尝试创建自己的CSS框架？  
 
 
 
     在2019年，我创建了一个CSS框架并将其命名为Rotala.css[1]。经过一些重构和修改，我终于在2020年发布了“玩具”框架。但它仍在原型设计中，因为我认为我的解决方案还不优雅。我构建此框架的原因很简单：我自己想要一个CSS框架。最初，我开始使用    
 
 
 ThikHome  / 0评论  2020-08-24  
 
  
 
 
  前端开发CSS清除浮动的方法有哪些？  
 
 
 
     在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素，此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现   
 
 
 nicepainkiller  / 0评论  2020-08-20  
 
  
 
 
  多终端同步工具browsersync安装使用  
 
 
 
     2：进入项目目录    window可以进到目标目录，shift+右键，在此处打开命令窗口    也可以cmd里面切换进入   
 
 
 aSuncat  / 0评论  2020-08-19  
 
  
 
 
  CSS知识点（三）  
 
 
 
     text-align:center:内容水平居中，可以让行内元素和行内块元素水平居中，不可以让块状元素居中。则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者?,这种现象被称为相邻块元素垂直外边距的合并。确定页   
 
 
 hellowzm  / 0评论  2020-08-18  
 
  
 
 
  css浮动  
 
 
 
     2、为什么要清除浮动？   
 
 
 aSuncat  / 0评论  2020-08-18  
 
  
 
 
  HTML&amp;CSS 案例  
 
 
 
     案例 1：旅游网站首页。确定使用table来完成布局。如果某一行只有一个单元格，则使用<tr><td></td></tr>   
 
 
 zengni  / 0评论  2020-08-17  
 
  
 
 
  css 背景图片路径问题  
 
 
 
     background-size: 宽 高  | cover 完全覆盖 | contain 宽高自动调节   
 
 
 zhanghaibing00  / 0评论  2020-08-17  
 
  
 
 
  提升布局能力！理解 CSS 的多种背景及使用场景和技巧  
 
 
 
     如果你还了解 CSS background 属性，可以去先 MDN 查看相关的知识。background-clip, background-color, background-image, background-origin,  background-po   
 
 
 李鴻耀  / 0评论  2020-08-17  
 
  
 
 
  前端CSS引入外部字体  
 
 
 
     src:url;/*字体包的引入路径*/   
 
 
 SHINESUNNY  / 0评论  2020-08-15  
 
  
 
 
  CSS动画实例：图文切换  
 
 
 
     先准备好一张图片，在页面中放置一个类名为container的层作为图文容器，在该层中再定义两个层：一个类名为image-box的层放置图片，一个类名为text-desc的层放置文本描述，HTML代码描述如下：。<p>黄鹤楼是国家首批AAAAA级   
 
 
 AlisaClass  / 0评论  2020-08-09  
 
  
 
 
  CSS盒子模型  
 
 
 
     CSS盒子模型本质上是一个盒子，封装周围的HTML元素。该属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。如上图，出现了取两个值中的较大者的现象，即为相邻块元素垂直外边距的合并。这   
 
 
 myloveqiqi  / 0评论  2020-08-09  
 
  
 
 
  CSS网页布局基础  
 
 
 
     CSS网页布局基础1.行布局-基础的行布局-行布局自适应-行布局自适应限制最大宽-行布局垂直水平居中-行布局某部位自适应-行布局固定宽-行布局导航随屏幕滚动2.多列布局-两列布局固定-两列布局自适应-三列布局固定-三列布局自适应3.混合布局-混合布局固定-   
 
 
 csstpeixun  / 0评论  2020-08-07  
 
  
 
 
  一个有意思的方案：不借助后台和 JS ，只用 CSS 让一个列表编号倒序，你会怎么做？  
 
 
 
     我正在做一个项目，其中有一个倒序的列表。列表创建时间降序排序的，这里我想在语义和视觉上都能体现出来。网上做了一些研究，找到了一些有趣的解决办法，有些很好，有些就不那么好了。接着，我们来看看有哪些实现的方式。简单，最直接的解决方案是HTML中的reverse   
 
 
 NARUTOLUOLUO  / 0评论  2020-08-03  
 
  
 
 
  左右切换css，html  
 
 
 
     <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="   
 
 
 yaodilu  / 0评论  2020-08-03  
 
  
 
 
  CSS选择器  
 
 
 
     应用于页面中的所有元素。匹配元素名称与选择器相似的元素。应用于<h1>元素，<h2>元素和<h3>元素。应用于所有class特性值为note的元素。匹配指定元素的后代元素。应用于所有位于<p>元素中的<   
 
 
 buttonChan  / 0评论  2020-08-02  
 
  
 
 
  css经典布局  
 
 
 
     2.去掉共同的父级wrapper，给middle加一个父级middle-wrap，属性设置为margin：0 100px，同时取消三者共同属性position：relative，也不用给left和right去调整位置。   
 
 
 lanzhusiyu  / 0评论  2020-08-01  
 
  
 
 
  怎么减少http请求次数  
 
 
 
     2.CSS Sprites图片是增加HTTP请求的最大可能者，把全站的图标都放在一个图像文件中，然后用CSS的background-image和background-position属性定位来显示其中的一小部分。   
 
 
 xvzhengyang  / 0评论  2020-07-30  
 
  
 
 
  JavaScript DOM 控制CSS  
 
 
 
     JavaScript更改P元素的样式：1.<html>2.<body>3.<p id="p2">Hello World!"red";6.</script>7.<p   
 
 
 drdrsky  / 0评论  2020-07-29  
 
  
 
 
  Front-end 前端优化总结  
 
 
 
     　　a. 早期使用 gulp 合并 或者内嵌js，css， 现在用webpack。　　b. 使用浏览器缓存，http1.0 , http1.1 cache-control ETag, if-none-match. c. code split + 按需加载    
 
 
 Phoebe的学习天地  / 0评论  2020-07-28  
 
  
 
 
  CSS3动画旋转——（图片360°旋转）  
 
 
 
     注意的是，建议这里使用的是插入图片，如果用背景图片的话，那么盒子内的内容也会进行旋转。   
 
 
 zhanghaibing00  / 0评论  2020-07-28  
 
  
 
 
  关于 CSS 中 Grid响应式布局  
 
 
 
     /*auto-fit，让我们跳过固定数量的列，将指定数量根据指定宽度替换为自适应的数量 。/*栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的100px宽的列。但如果我们将所有列硬写为100px，永远没法实现的弹性，因为它们很难填充整个宽度   
 
 
 xiaohuli  / 0评论  2020-07-28  
 
  
 
 
  只用 css 就可以画饼状图  
 
 
 
     原理很简单，就是用画三角形的方法画一个个扇形，然后计算所需的旋转角度。画三角形的方法就是设置盒子的 width 和 height 为0，计算边框的宽度画出对应的三角形，麻烦的就是应该怎么去旋转这个扇形。   
 
 
 somboy  / 0评论  2020-07-27  
 
  
 
 
  20个CSS快速提升技巧  
 
 
 
     本文涵盖了20个css技巧，可以解决许多工作中常见的问题。css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来   
 
 
 Ladyseven  / 0评论  2020-07-25  
 
  
 
 
  css属性 z-index使用  
 
 
 
     z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而z-index 值为负数的对象在其之下。而在之前的浏览器版本中，iframe 对象是窗口控件，会忽略此属性。并且st   
 
 
 teresalxm  / 0评论  2020-07-25  
 
  
 
 
  详解 css float属性  
 
 
 
     　　在css中float就是浮动的意思，简单来说，就是让元素浮动起来。我们把网页想象成是拼图的底板，里面的元素就是一个个小的拼图块，所谓浮动就是让本来应该贴着拼图底板的块起来，这就是浮动，也是所谓的脱离文档流。标准文档流就是拼好的拼图。我们会看到，son2   
 
 
 xvzhengyang  / 0评论  2020-07-25  
 
  
 
 
  妙用CSS变量，让你的CSS变得更心动  
 
 
 
     「CSS变量」又叫「CSS自定义属性」，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上「CSS变量」，可能其自身隐藏的魅力，让笔者对它刮目相看。谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。看   
 
 
 nicepainkiller  / 0评论  2020-07-24  
 
  
 
 
  css基础--盒子模型  
 
 
 
     1 绝大多数标签都可以看作盒子，可以设置宽高或设置内容；在CSS中，"box model"这一术语是用来设计和布局时使用。　　CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。　　盒模型允许我们   
 
 
 AlisaClass  / 0评论  2020-07-19  
 
  
 
 
  css 属性值 display  
 
 
 
     /* display: block; */ /* 浏览器默认样式 *//* display: inline; */ /* 设置为行内元素 *//* display: none; */ /* 隐藏元素不占空间 *//* display: inline-blo   
 
 
 hellowzm  / 0评论  2020-07-19  
 
  
 
 
  vue 对css样式进行修改  
 
 
 
     background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT   
 
 
 昔人已老  / 0评论  2020-07-19  
 
  
 
 
  CSS - 正确解决 float 高度坍塌的问题  
 
 
 
     子元素使用 float 后，使其脱离文档流 。4，子元素后面添加 一个 clear:both 的 兄弟元素 ， 缺陷是 ： 使 html 添加了一个多余的结构。5，为父元素添加一个 content:"";clear:both;displ   
 
 
 zhanghao  / 0评论  2020-07-19  
 
  
 
 
  css变量_原生css 中变量的使用  
 
 
 
     前两天看到阮大神的一篇在css中使用变量的文章，整理了一下。这个重要的css新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生css从此变得异常强大。上面代码中，body选择器里面声明了两个变量：--foo和--bar。它们与colo   
 
 
 lanzhusiyu  / 0评论  2020-07-19  
 
  
 
 
  CSS让页面平滑滚动  
 
 
 
     兼容情况可以点击这里查看。凡是需要滚动的地方都加一句scroll-behavior:smooth就好了！你别管他用不用得到，也不用管浏览器兼容性如何，你都加上。这就像一个不要钱的免费抽奖，没有中奖，没关系，又没什么损失，中奖了自然好，锦上添花！scroll   
 
 
 骆驼的自白  / 0评论  2020-07-18  
 
  
 
 
  CSS 伪元素的用法和使用详解  
 
 
 
     CSS伪元素是用来添加一些选择器的特殊效果。"first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：。上   
 
 
 lanzhusiyu  / 0评论  2020-07-19  
 
  
 
 
  CSS便捷开发小工具汇总  
 
 
 
     虽然现代浏览器支持css3，但是一些过往的版本或是目前有些css3属性的应用还是离不开前缀的。一些牛逼且执着于web技术且乐于分享的仁兄就搞了个名叫prefixfree.js的插件可以自动补全前缀。首先在页面任意地方插入插件:. 但是其实部分我们要的想要的   
 
 
 hellowzm  / 0评论  2020-07-19  
 
  
 
 
  06、Webpack使用loader配置css文件、图片文件、  
 
 
 
     loader 让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader   
 
 
 waterv  / 0评论  2020-07-18  
 
  
 
 
  前端工程师面试题汇总-5  
 
 
 
     属于元素事件属性的是( )正确答案: A CA. onblurB. requiredC. onfocusD. onsearch. 关于link与@import的区别:区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@impo   
 
 
 CSSEIKOCS  / 0评论  2020-07-18  
 
  
 
 
  分享一个纯CSS写的钟表式计时器  
 
 
 
     width: 400px;height: 400px;border-radius: 50%;border: 3px solid black;margin: 200px auto;position: relative;width: 3px;height: 4   
 
 
 lanzhusiyu  / 0评论  2020-07-18