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

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container {
      position: absolute;
      top: 10%;
      }
      .button {
      border: none;
      display: block;
      text-align: center;
      cursor: pointer;
      text-transform: uppercase;
      outline: none;
      overflow: hidden;
      position: relative;
      color: #eeeeee;
      font-weight: 600;
      font-size: 15px;
      background-color: #153f00;
      padding: 15px 50px;
      margin: 0 auto;
      }
      .button span {
      position: relative; 
      z-index: 1;
      }
      .button:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 470%;
      width: 140%;
      background: #52b71f;
      -webkit-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
      -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg);
      transform: translateX(-100%) translateY(-25%) rotate(45deg);
      }
      .button:hover:after {
      -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
      transform: translateX(-9%) translateY(-25%) rotate(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Style button</h2>
    <div class="container">	
      <button type="button" class="button">
      <span>Hover!</span>
      </button>
    </div>
  </body>
</html>