TryIt Editor v2.0 - How to style buttons with CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #3b0044;
        color: #6098ff;
        font-family: sans-serif;
        font-size: 16px;
      }
      .wrapper {
        margin: 80px auto;
        text-align: center;
        width: 100%;
        position: relative;
      }
      .button {
        padding: 15px 100px;
        margin: 10px 4px;
        color: #ffffff;
        font-family: sans-serif;
        text-transform: uppercase;
        text-align: center;
        position: relative;
        text-decoration: none;
        display: inline-block;
      }
      .button {
        border: 1px solid transparent;
        -webkit-transition: all 0.4s cubic-bezier(0.5, 0.24, 0, 1);
        transition: all 0.4s cubic-bezier(0.5, 0.24, 0, 1);
      }
      .button::before {
        content: "";
        position: absolute;
        left: 0px;
        bottom: 0px;
        z-index: -1;
        width: 0%;
        height: 1px;
        background: #003177;
        box-shadow: inset 0px 0px 0px #b6cdef;
        display: block;
        -webkit-transition: all 0.4s cubic-bezier(0.5, 0.24, 0, 1);
        transition: all 0.4s cubic-bezier(0.5, 0.24, 0, 1);
      }
      .button:hover::before {
        width: 100%;
      }
      .button::after {
        content: "";
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: -1;
        width: 0%;
        height: 1px;
        background: #a9c1e8;
        -webkit-transition: all 0.4s cubic-bezier(0.7, 0.25, 0, 1);
        transition: all 0.4s cubic-bezier(0.7, 0.25, 0, 1);
      }
      .button:hover::after {
        width: 100%;
      }
      .button:hover {
        border-left: 1px solid #b6cdef;
        border-right: 1px solid #6098ff;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <a href="#" class="button">Button 1</a>
      <a href="#" class="button">Button 2</a>
    </div>
  </body>
</html>