TryIt Editor v2.0 - Как оформить кнопки с помощью CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #560059;
      color:#eeeeee;
      font-family:Arial;
      font-size:16px;
      }
      .wrapper {
      margin: 80px auto;
      text-align: center;
      width: 100%;
      position: relative;
      }
      .button {
      padding: 15px 100px;
      margin:10px 4px;
      color: #eee;
      font-family: sans-serif;
      text-transform: uppercase;
      text-align: center;
      position: relative;
      text-decoration: none;
      display:inline-block;
      border:1px solid ;
      }
      .button::before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      -webkit-transform: scaleY(.1);
      transform: scaleY(.1);
      transition: all .4s
      }
      .button:hover{
      color:#b414ba;  
      }
      .button:hover::before{
      opacity: 1;
      background-color: #f7c2f9;
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
      transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s;
      transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity
      }
    </style>
  </head>
  <body>
    <div class="wrapper">   
      <span class="button">Button 1</span>
      <span class="button">Button 2</span>
    </div>
  </body>
</html>