径向渐变与按钮点击光圈效果实例页面

展示

代码

• HTML：

  <p><button class="button-a">炫彩按钮</button></p>
  <p><button class="button-b">高光按钮</button></p>
  <p><button class="button-c">点击我</button></p>

• CSS：

  button {
      height: 40px;
      border: none;
      padding: 0 20px;
      background-color: #2a80eb;
      color: #fff;
      border-radius: 4px;
      outline: none;
  }
  .button-a {
      background-image: radial-gradient(farthest-side at bottom left, rgba(255, 0, 255, .5), transparent),
          radial-gradient(farthest-corner at bottom right, rgba(255, 255, 50, .5), transparent);
  }
  .button-a:active {
      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
  }
  .button-b {
      background-image: radial-gradient(160% 100% at 50% 0%, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0) 52%);
  }
  .button-b:active {
      background-image: radial-gradient(160% 100% at 50% 0%, hsla(0, 0%, 100%, .2) 50%, hsla(0, 0%, 100%, 0) 52%);
  }
  
  .button-c {
      background-image: radial-gradient(closest-side circle, rgba(255, 70, 70, .9), rgba(255, 70, 70, .9) 99%, rgba(255, 70, 70, 0) 100%);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 0% 0%;
      transition: all .2s;
  }
  .button-c:active {
      background-size: 250% 250%;
  }