闪烁的button

2018年，每天写点Css。

今天的小demo是看到isux 的招聘页面提交按钮，看着不错，拿来造轮子。

流动的submit按钮

效果展示 button

实现代码。

<style type="text/css">
    .btn-wrapper {
      position: relative;
      display: block;
      width: 320px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 18px;
      border: 1px solid #000;
      background-color: #fff;
      color: #000;
      cursor: pointer;
      margin: 28px auto;
      font-family: "Pingfang SC", "Microsoft YaHei", "sans-serif";
      box-shadow: inset 0 0 0 0 #ffffff;
      outline: none;
    }
    .btn-wrapper:hover {
      color: #ffffff;
    }
    .btn-wrapper:before, .btn-wrapper::after {
      content: '';
      position: absolute;
      width: 50%;
      height: 100%;
      background-color: #000;
      top: 0;
      transition: transform 0.8s linear;
      transform: scaleX(0);
    }
    .btn-wrapper:before {
      left: 0;
      transform-origin: right center;
    }
    .btn-wrapper:after {
      right: 0;
      transform-origin: left center;
    }
    .btn-wrapper:hover:before, .btn-wrapper:hover:after {
      transform: scaleX(1);
    }
    .btn-wrapper span{
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      transform: translate(-50%, -50%);
    }
  </style>
  <div>
    <button data-ignore="true" class="btn-wrapper">
      <span>SUBMIT</span>
    </button>
  </div>

逐渐呈现的下划线

这个demo是七牛云的首页导航条的一个效果，看着效果类似，就拿来了。

效果展示 逐渐呈现的下划线

实现代码

<style type="text/css">
    a {
      background-color: #303848;
      padding: 22px 12px;
      display: block;
      color: #fff;
      position: absolute;
      cursor: pointer;
      text-decoration: none;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    a::after {
      position: absolute;
      bottom: 20px;
      left: 14px;
      right: 14px;
      height: 2px;
      background: #ffffff;
      content: '';
      transition: transform 0.8s ease-in;
      transform: scale3d(0, 1, 1);
    }
    a:hover::after {
      transform: scale3d(1, 1, 1);
    }
  </style>
  <a href="">
    解决方案
  </a>
  <img src="./button.demo2.gif" alt="">