按钮button<div class="box"> <button> <span>按钮</span> </button>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .box {
          transition: padding 300ms;
      }

      .box:active {
          padding: 2px;
      }

      button {
          background-color: #6e8df5;
          border: none;
          border-radius: 4px;
          color: white;
          padding: 4px 16px;
          font-size: 14px;
          cursor: pointer;
          line-height: 22px;
          transition: all 300ms;
      }
      .common{
          background-color: #96969642;
          color: black;
      }
      .common:hover:active {
          background-color: #96969690;
          font-size: 12px;
      }
      .common:hover{
          background-color: #96969670;
      }
      button:active {
          padding: 2px 14px;
      }
      button:hover:active {
          background-color: #506fd7;
          font-size: 12px;
      }
      button:hover{
          background-color: #6E8DF5D8;
      }

      span{
          line-height: 14px;
      }
  </style>
</head>
<body>
<div class="box">
  <button>
    <span>按钮</span>
  </button>
</div>
<div class="box">
  <button class="common">
    <span>按钮</span>
  </button>
</div>
<script>
</script>
</body>
</html>
```
```