炫彩流光按钮

写在前面

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

效果图

三个绝美的样例


HTML代码

<div class="box">

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

</div>

实现过程

  1. 给按钮添加一个渐变的背景颜色
  2. 将背景的大小放大到原来的若干倍，可以自己设定，这样做是为了让渐变的效果更明显，同时后续实现流光的效果
  3. 给字体设置text-shadow属性，多设置几个可以增加亮度
  4. 当鼠标经过时，实现流光的效果，通过动画改变背景的位置来实现，相当于拖动背景，让按钮显示不一样的颜色
  5. 当鼠标经过时添加光晕的效果，通过伪元素，建一个比原先按钮大一点的盒子，先利用透明度为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的更多相关文章

  1. Canvas跟随鼠标炫彩小球

    跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色,随机半径 鼠标移动通过实例化,新增小球 通过调用给原型新增的方法,来实现小球的动画 ...

  2. js 生成随机炫彩背景

    在浏览 https://ghost.org/xxxx/ 时. 可以使用 background-size: cover; 加上很小的像素图,放大后实现炫彩背景效果. 使用 js canvas 随机生成小 ...

  3. HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

  5. [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球

    综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...

  6. [Micropython]发光二极管制作炫彩跑马灯

       先甩锅 做完后才发现最后一个灯坏了,就坏了一个灯也不好意思去找淘宝店家,大家视频凑合着看把.不过并不影响实验效果.因为这个发光二极管白天不是很明显 晚上炫彩效果就能出来了.本次实验用的是8个灯珠 ...

  7. java-js知识库之二——canvas绘制炫彩气泡

    现在使用canvas绘制气泡,虽说很多人都已经实现过了,可能方法都大同小异,但自己写和看别人写完全是两码事,自己会写的才是自己的,话不多说,直接上代码. 先来一张效果图: 现在上代码,代码有详细的注释 ...

  8. 按钮CSS样式

      CreateTime--2017年5月5日11:23:18Author:Marydon 按钮CSS样式 实现效果: <input type="button" onclic ...

  9. legend---四、菜鸟教程css3里面有教你炫酷的按钮怎么做

    legend---四.菜鸟教程css3里面有教你炫酷的按钮怎么做 一.总结 一句话总结:想学,总是有很多资料的 1. 自动居中是 margin:100px 0px;么? 自动居中是margin:100 ...

随机推荐

  1. [ERROR]: gitstatus failed to initialize.

    1 问题描述 Manjaro升级后,zsh的主题p10k出现的问题. Your git prompt may disappear or become slow. Run the following c ...

  2. Go-30-main包

    main包 package main import ( "fmt" "kubeflow-tool/main/cmd" "os" ) func ...

  3. 6. VUE 指令-概述

    指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变时,将其产生 ...

  4. 如何识别自己基因组数据是哪个全基因组参考版本（Genome Reference Versions/ Genome Build）

    首先在这里先感谢我们[Bio生信学习交流群]的群友和创建此群的群主[陈博士后]. 今天解决的问题是怎么查看自己的基因组数据是哪个Genome Reference Versions. 步骤: 第一步,打 ...

  5. 数据结构之Stack | 让我们一块来学习数据结构

    栈的介绍 栈就是和列表类似的一种数据结构,它可用来解决计算机世界里的很多问题.栈是一种高 效的数据结构,因为数据只能在栈顶添加或删除,所以这样的操作很快,而且容易实现. 栈的使用遍布程序语言实现的方方 ...

  6. docker搭建简单mysql主从

    关于MySQL主从模式,如果我们直接在本机上搭建的话,是没法搭建的,只能借助于虚拟机,但有的时候我们又需要搭建一个主从集群,以便于进行一些功能性的测试.这个时候我们就可以尝试使用docker,借助于d ...

  7. k8s kubernetes给node节点添加标签和删除node节点标签

    node节点IP 192.168.1.205 给节点添加标签的命令 添加label语法 kubectl label nodes <node-name> <label-key>= ...

  8. kuberadm集群升级

    升级kubernetes集群 注意不能跨版本升级 比如1.13.x 要先升级到1.14.x,不能直接升级到1.15.x 举例说明升级到1.15,和1.14有些参数不一样,具体看官网: https:// ...

  9. 『动善时』JMeter基础 — 6、使用JMeter发送一个最基础的请求

    目录 步骤1:创建一个测试计划 步骤2:创建线程组 步骤3:创建取样器 步骤4:创建监听器 步骤5:完善信息 步骤6:保存测试计划 步骤7:查看结果 总结:JMeter测试计划要素 当我们第一次打开J ...

  10. Windows PE导出表编程4（重构导出表实现私有函数导出）

    本次是尝试调用DLL里面的私有函数. 一: 之前先探索一下,首先可以考虑用偏移量来调用,就是如果知道了某个私有函数和某个导出的公共函数的相对便宜的话,直接加载dll获取公共函数地址,然后自己手动去偏移 ...