<template>
  <div id="app">
    <button class="btn btn-primary">按鈕1 <span class="mask mask-1"></span></button>
    <button class="btn btn-secondary">按鈕2 <span class="mask mask-2"></span></button>
    <button class="btn btn-warning">按鈕3 <
 
span class="mask mask-3"></span></button>
    <button class="btn btn-success">按鈕4 <span class="mask mask-4"></span></button>
  </div>
</template>
<style lang="less" scoped>
#app {
  button {
    outline: none;
    border: none;
    cursor: pointer;
  }
 

  .btn {
    position: relative;
    height: 40px;
    padding: 0 15px;
    color: #fff;
    font-size: 16px;
    border: 1px solid;
    border-radius: 3px;
    margin: 0 10px;
  }
  .btn-primary {
    background-color: #337ab7;
    border-color: #2e6da4;
  }
  .btn-secondary {
    background-color: #5bc0de
 
;
    border-color: #46b8da;
  }
  .btn-warning {
    background-color: #f0ad4e;
    border-color: #eea236;
  }
  .btn-success {
    background-color: #5cb85c;
    border-color: #4cae4c;
  }
  .mask {
    position: absolute;
    height: 100%;
    background-color: #fff;
    opacity: 1;
  }
  .mask-1 {
    top: 0;
    right: 0;
  }
  .mask-2 {
    top: 0;
    left: 0;
    border-top-right-radius: 40px;
  }
  .mask-3 {
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
  }
  .mask-4 {
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
  }
  .btn-primary:hover .mask-1 {
    animation-name: btn-animation-one;
    animation-duration: 1s;
  }
  .btn-secondary:hover .mask-2 {
    animation-name: btn-animation-one;
    animation-duration: 1s;
  }
  .btn-warning:hover .mask-3 {
    animation-name: btn-animation-three;
    animation-duration: 1s;
  }
  .btn-success:hover .mask-4 {
    animation-name: btn-animation-four;
    animation-duration: 1s;
  }
  @keyframes btn-animation-one {
    from {
      width: 0;
      opacity: 1;
    }
    to {
      width: 100%;
      opacity: 0;
    }
  }
  @keyframes btn-animation-three {
    from {
      width: 1px;
      height: 1px;
      transform: scale(0);
      opacity: 1;
    }
    to {
      width: 1px;
      height: 1px;
      transform: scale(100);
      opacity: 0;
    }
  }
  @keyframes btn-animation-four {
    from {
      height: 0;
      opacity: 1;
    }
    to {
      height: 100%;
      opacity: 0;
    }
  }
}
</style>