TryIt Editor v2.0 - Wie kann man Buttons mit CSS gestalten

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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(.5, .24, 0, 1);
      transition: all 0.4s cubic-bezier(.5, .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(.5, .24, 0, 1);
      transition: all 0.4s cubic-bezier(.5, .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(.7, .25, 0, 1);
      transition: all 0.4s cubic-bezier(.7, .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>