一个炒鸡酷炫的按钮！流光特效！进来把代码拿走！

我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！

按钮是前端处理用户交互的常用元素，原生的按钮可以说是极其丑陋。。。在实践过程中，经常需要针对按钮样式进行优化，今天的主题就是，用纯纯的css3实现一个酷炫的按钮

丑陋的原生按钮

我的酷炫按钮

食用说明

鼠标移入button内即可查看流光效果，基于伪类元素、背景渐变、动画实现，需要直接显示流光效果的，请将hover内的代码移入正常状态代码内

实现步骤

1. 页面上放两个原生的button元素，至于为什么是俩，因为我想写两种特效。。。 2.先针对页面布局编写css,这里为了省事，使用了通配符选择器，实际生产中不建议这样使用，因为涉及到元素很多的时候，通配符选择器会造成不必要的渲染开销。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
  }

3.背景置为深色背景，为什么是深色背景因为我觉得这样效果更好看,这里采用的是,这个选择器表示a,b均采用如下样式，这里仅仅是为了布局，你想的话，用flex也是可以的

html,body {
    display: grid;
    height: 100%;
    overflow: hidden;
    place-items: center;
    background: #000;
  }

4.针对button的初始样式进行优化

 button {
    position: relative;
    height: 60px;
    width: 200px;
    margin: 0 35px;
    border-radius: 50px;
    border: none;
    outline: none;
    background: #111;
    color: #fff;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
  }

5. 通过伪类制造模糊效果

button:first-child::before,
  button:last-child::before {
    content: '';
    position: absolute;
    background: inherit;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    border-radius: 50px;
    filter: blur(20px);
    opacity: 0;
    transition: opacity .5s;
  }

6.hover展现流光特效

 button:first-child:hover {
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
  }

  button:last-child:hover {
    background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
    background-size: 400%;
  }
  button:first-child:hover:before,
  button:last-child:hover:before {
    opacity: 1;
    z-index: -1;
  }

  button:hover {
    z-index: 1;
    animation: glow 8s linear infinite;
  }

  @keyframes glow {
    0% {
      background-position: 0%;
    }

    100% {
      background-position: 400%;
    }
  }

OK，到现在，我们已经成功实现了酷炫流光按钮，点赞收藏拿走。。。