Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Practical CSS Buttons</h1>
<div class="row">
  <a href="#" class="button one">Button 1</a>
  <a href="#" class="button one rounded">Button 1 R</a>
  <a href="#" class="button one hover-shadow">Button 1 S</a>
  <a href="#" class="button one rounded hover-shadow">Button 1 R S</a>
</div>
<div class="row">
  <a href="#" class="button two">Button 2</a>
  <a href="#" class="button two filled">Button 2 F</a>
  <a href="#" class="button two hover-shadow">Button 2 S</a>
  <a href="#" class="button two filled hover-shadow">Button 2 F S</a>
</div>
<div class="row">
  <a href="#" class="button three">Button 3</a>
  <a href="#" class="button three rounded">Button 3 R</a>
  <a href="#" class="button three hover-shadow">Button 3 S</a>
  <a href="#" class="button three rounded hover-shadow">Button 3 R S</a>
</div>
<div class="row">
  <a href="#" class="button four">Button 4</a>
  <a href="#" class="button four rounded">Button 4 R</a>
  <a href="#" class="button four hover-shadow">Button 4 S</a>
  <a href="#" class="button four rounded hover-shadow">Button 4 R S</a>
</div>
<div class="row">
  <a href="#" class="button five">Button 5</a>
  <a href="#" class="button five rounded">Button 5 R</a>
  <a href="#" class="button five hover-shadow">Button 5 S</a>
  <a href="#" class="button five rounded hover-shadow">Button 5 R S</a>
</div>
<div class="row">
  <a href="#" class="button six">Button 6</a>
  <a href="#" class="button six rounded">Button 6 R</a>
  <a href="#" class="button six hover-shadow">Button 6 S</a>
  <a href="#" class="button six rounded hover-shadow">Button 6 R S</a>
</div>
<div class="row">
  <a href="#" class="button seven">Button 7</a>
  <a href="#" class="button seven rounded">Button 7 R</a>
  <a href="#" class="button seven hover-shadow">Button 7 S</a>
  <a href="#" class="button seven rounded hover-shadow">Button 7 R S</a>
</div>
<div class="row">
  <a href="#" class="button eight">Button 8</a>
  <a href="#" class="button eight rounded">Button 8 R</a>
  <a href="#" class="button eight filled">Button 8 F</a>
  <a href="#" class="button eight filled rounded">Button 8 F R</a>
</div>
<div class="row">
  <a href="#" class="button nine">Button 9</a>
  <a href="#" class="button nine rounded">Button 9 R</a>
  <a href="#" class="button nine hover-shadow">Button 9 S</a>
  <a href="#" class="button nine rounded hover-shadow">Button 9 R S</a>
</div>
<div class="row">
  <a href="#" class="button ten">Button 10</a>
  <a href="#" class="button ten rounded">Button 10 R</a>
  <a href="#" class="button ten hover-shadow">Button 10 S</a>
  <a href="#" class="button ten rounded hover-shadow">Button 10 R S</a>
</div>
<div class="row">
  <a href="#" class="button eleven">Button 11</a>
  <a href="#" class="button eleven rounded">Button 11 R</a>
  <a href="#" class="button eleven hover-shadow">Button 11 S</a>
  <a href="#" class="button eleven rounded hover-shadow">Button 11 R S</a>
</div>
<div class="row">
  <a href="#" class="button twelve">Button 12</a>
  <a href="#" class="button twelve rounded">Button 12 R</a>
  <a href="#" class="button twelve hover-shadow">Button 12 S</a>
  <a href="#" class="button twelve rounded hover-shadow">Button 12 R S</a>
</div>
<div class="row">
  <a href="#" class="button thirteen">Button 13</a>
  <a href="#" class="button thirteen rounded">Button 13 R</a>
  <a href="#" class="button thirteen hover-shadow">Button 13 S</a>
  <a href="#" class="button thirteen rounded hover-shadow">Button 13 R S</a>
</div>
<div class="row">
  <a href="#" class="button fourteen">Button 14</a>
  <a href="#" class="button fourteen rounded">Button 14 R</a>
  <a href="#" class="button fourteen hover-shadow">Button 14 S</a>
  <a href="#" class="button fourteen rounded hover-shadow">Button 14 R S</a>
</div>
<div class="row">
  <a href="#" class="button fifteen">Button 15</a>
  <a href="#" class="button fifteen filled">Button 15 F</a>
  <a href="#" class="button fifteen hover-shadow">Button 15 S</a>
  <a href="#" class="button fifteen filled hover-shadow">Button 15 F S</a>
</div>
<div class="row">
  <a href="#" class="button sixteen">Button 16</a>
  <a href="#" class="button sixteen rounded">Button 16 R</a>
  <a href="#" class="button sixteen inverse">Button 16 I</a>
  <a href="#" class="button sixteen rounded inverse">Button 16 R I</a>
</div>
<div class="row">
  <a href="#" class="button seventeen">Button 17</a>
  <a href="#" class="button seventeen rounded">Button 17 R</a>
  <a href="#" class="button seventeen hover-shadow">Button 17 S</a>
  <a href="#" class="button seventeen rounded hover-shadow">Button 17 R S</a>
</div>
<div class="row">
  <a href="#" class="button eighteen">Button 18</a>
  <a href="#" class="button eighteen rounded">Button 18 R</a>
  <a href="#" class="button eighteen filled">Button 18 F</a>
  <a href="#" class="button eighteen rounded filled">Button 18 R F</a>
</div>
<div class="row">
  <a href="#" class="button nineteen">Button 19</a>
  <a href="#" class="button nineteen rounded">Button 19 R</a>
  <a href="#" class="button nineteen filled">Button 19 F</a>
  <a href="#" class="button nineteen rounded filled">Button 19 R F</a>
</div>
<div class="row">
  <a href="#" class="button twenty">Button 20</a>
  <a href="#" class="button twenty rounded">Button 20 R</a>
  <a href="#" class="button twenty hover-shadow">Button 20 S</a>
  <a href="#" class="button twenty rounded hover-shadow">Button 20 R S</a>
</div>
<div class="row">
  <a href="#" class="button twenty_one">Button 21</a>
  <a href="#" class="button twenty_one rounded">Button 21 R</a>
  <a href="#" class="button twenty_one hover-shadow">Button 21 S</a>
  <a href="#" class="button twenty_one rounded hover-shadow">Button 21 R S</a>
</div>
<div class="row">
  <a href="#" class="button twenty_two">Button 22</a>
  <a href="#" class="button twenty_two rounded">Button 22 R</a>
  <a href="#" class="button twenty_two hover-shadow">Button 22 S</a>
  <a href="#" class="button twenty_two rounded hover-shadow">Button 22 R S</a>
</div>
<div class="row">
  <a href="#" class="button twenty_three">Button 23</a>
  <a href="#" class="button twenty_three rounded">Button 23 R</a>
  <a href="#" class="button twenty_three hover-shadow">Button 23 S</a>
  <a href="#" class="button twenty_three rounded hover-shadow">Button 23 R S</a>
</div>
<div class="row">
  <a href="#" class="button twenty_four">Button 24</a>
  <a href="#" class="button twenty_four rounded">Button 24 R</a>
  <a href="#" class="button twenty_four hover-shadow">Button 24 S</a>
  <a href="#" class="button twenty_four rounded hover-shadow">Button 24 R S</a>
</div>
<div class="row">
  <a href="#" class="button twenty_five">Button 25</a>
  <a href="#" class="button twenty_five filled">Button 25 F</a>
  <a href="#" class="button twenty_five hover-shadow">Button 25 S</a>
  <a href="#" class="button twenty_five filled hover-shadow">Button 25 F S</a>
</div>
<div class="row">
  <a href="#" class="button twenty_six">Button 26</a>
  <a href="#" class="button twenty_six rounded">Button 26 R</a>
  <a href="#" class="button twenty_six hover-shadow">Button 26 S</a>
  <a href="#" class="button twenty_six rounded hover-shadow">Button 26 R S</a>
</div>
<div class="row">
  <a href="#" class="button twenty_seven">Button 27</a>
  <a href="#" class="button twenty_seven rounded">Button 27 R</a>
  <a href="#" class="button twenty_seven hover-shadow">Button 27 S</a>
  <a href="#" class="button twenty_seven rounded hover-shadow">Button 27 R S</a>
</div>
<div class="row">
  <a href="#" class="button twenty_eight">Button 28</a>
  <a href="#" class="button twenty_eight rounded">Button 28 R</a>
  <a href="#" class="button twenty_eight hover-shadow">Button 28 S</a>
  <a href="#" class="button twenty_eight rounded hover-shadow">Button 28 R S</a>
</div>
<div class="row">
  <a href="#" class="button twenty_nine">Button 29</a>
  <a href="#" class="button twenty_nine rounded">Button 29 R</a>
  <a href="#" class="button twenty_nine top">Button 29 T</a>
  <a href="#" class="button twenty_nine rounded top">Button 29 R T</a>
</div>
<div class="row">
  <a href="#" class="button thirty">Button 30</a>
  <a href="#" class="button thirty rounded">Button 30 R</a>
  <a href="#" class="button thirty hover-shadow">Button 30 S</a>
  <a href="#" class="button thirty rounded hover-shadow">Button 30 R S</a>
</div>
<svg id="svg-goo"><defs><filter id="goo"><feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"></feGaussianBlur><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"></feColorMatrix><feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend></filter></defs></svg>
              
            
!

CSS

              
                @import "compass";
@import "compass/css3";
* {
  box-sizing: border-box;
  &:before,
  &:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
}
body {
  font-family: Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
  text-align: center;
  padding: 20px 5%;
}
%backface_visibility_hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
%hover_ease_0_1s {
  transition:all 0.1s ease;
}
%hover_ease_0_2s {
  transition:all 0.2s ease;
}
%hover_ease_0_3s {
  transition:all 0.3s ease;
}
%hover_ease_in_0_3s {
  transition:all 0.3s ease-in;
}
%hover_ease_out_0_3s {
  transition:all 0.3s ease-out;
}
%hover_ease_0_4s {
  transition:all 0.4s ease;
}%hover_ease_in_0_4s {
  transition:all 0.4s ease-in;
}
%hover_ease_out_0_4s {
  transition:all 0.4s ease-out;
}
%hover_ease_0_5s {
  transition:all 0.5s ease;
}%hover_ease_in_0_5s {
  transition:all 0.5s ease-in;
}
%hover_ease_out_0_8s {
  transition:all 0.8s ease-out;
}
.row {
  > a {
    margin: 0 10px 30px;
    min-width: 166px;
  }
}
h1 {
  position: relative;
  font-size: 50px;
  font-weight: bold;
  margin: 1vw auto 2vw;
  padding-bottom: 2vw;
  color: #08c7d8;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -15%;
    width: 30%;
    height: 1px;
    background-color: #08c7d8;
  }
}

%filled_obj {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// Button CSS
$button_color1: #08c7d8;
$button_color2: #0f9fde;
$button_color3: #2e5aa5;
$button_color4: #998bbf;
$button_color5: #bf87d3;
$button_color6: #aa7ca9;
$button_color7: #ef4793;
$button_color8: #db5976;
$button_color9: #5ec49e;
$button_color10: #6ba866;
$button_color11: #8caf38;
$button_color12: #c4b20d;
$button_color13: #7a655a;
$button_color14: #e08421;


.button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
  padding: 18px 30px;
  font-size: 16px;
  overflow: hidden;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid transparent;
  @extend %backface_visibility_hidden;
  @extend %hover_ease_0_3s;
  &:focus {
    outline: none;
  }
  &:active {
    transform:scale(0.95);
  }
  &.rounded {
    border-radius: 28px;
  }
  .border {
    &::before,
    &::after {
      position: absolute;
      content: "";
    }
    &::before {
      width: calc(100% + 2px);
      height: 2px;
    }
    &::after {
      width: 2px;
      height: calc(100% + 2px);
    }
  }
  &.hover-shadow {
    &:hover {
      box-shadow: 0 15px 12px -5px rgba(#000, 0.24);
    }
  }
  > .layer {
    @extend %filled_obj;
    z-index: -1;
    &::before,
    &::after {
      content: "";
      @extend %filled_obj;
    }
  }
  &.one {
    color: $button_color1;
    border-color: $button_color1;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      border: 2px solid $button_color1;
      transform:translateX(-50%) translateY(-50%);
      @extend %hover_ease_0_3s;
    }
    &.rounded::after {
      border-radius: 28px;
    }
    &:hover {
      &::after {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
      }
    }
  }
  &.two {
    color: $button_color2;
    border: none;
    overflow: visible;

    &.filled {
      color: #fff;
      &::after {
        background-color: $button_color2;
      }
    }
    &::after {
      content: "";
      @extend %filled_obj;
      @extend %hover_ease_0_3s;
      transform:skewX(-15deg);
      border: 2px solid $button_color2;
      z-index: -1;
    }
    &:hover {
      &::after {
        box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px $button_color2;
      }
    }
  }
  &.three {
    color: $button_color3;
    border-color: $button_color3;
    transition:all 0.5s ease;
    .slime {
      @extend %filled_obj;
      filter:url(#goo);
      z-index: -1;
      span {
        @extend %filled_obj;
        top: -30%;
        width: 56%;
        height: 160%;
        border-radius: 50%;
        background-color: $button_color3;
        transform:translateY(120%);
        transition:all 0.6s ease;
        @extend %backface_visibility_hidden;
        &:nth-child(1) {
          left: -28%;
        }
        &:nth-child(2) {
          left: 22%;
          transition-delay:.08s;
        }
        &:nth-child(3) {
          left: 72%;
        }
      }
    }
    &:hover {
      color: #fff;
      .slime {
        span {
          transform:translateY(0) scale(1.2);
        }
      }
    }
  }
  &.four {
    color: $button_color4;
    border-color: $button_color4;
    perspective: 1000px;
    &::after {
      content: "";
      background-color: $button_color4;
      z-index: -1;
      @extend %filled_obj;
      @extend %hover_ease_0_4s;
      transform:rotateX(93deg);
      transform-origin:center bottom;
    }
    &.rounded {
      &::after {
        border-radius: 26px;
      }
    }
    &:hover {
      color: #fff;
      &::after {
        transform:rotateX(0);
      }
    }
  }
  &.five {
    color: $button_color5;
    border-color: $button_color5;
    &::after {
      background-color: $button_color5;
      z-index: -1;
      content: "";
      @extend %filled_obj;
      transition:transform 0.5s cubic-bezier(0.56, 0.46, 0.12, 1.4);
      transform:skewX(-10deg) translateX(110%) scaleX(1.1);
    }
    &:hover {
      color: #fff;
      &::after {
        transform:skewX(-10deg) translateX(0%) scaleX(1.1);
      }
    }
  }
  &.six {
    color: $button_color6;
    border-color: $button_color6;
    transition:box-shadow 0.3s ease 0.2s, color 0.2s ease-in 0.4s;
    &::after {
      content: "";
      background-color: $button_color6;
      z-index: -1;
      transform:scale(2) skew(-45deg) translateX(-100%);
      @extend %filled_obj;
      transition:transform 0.4s ease-in;
    }
    &:hover {
      color: #fff;
      transition:box-shadow 0.3s ease, color 0.2s ease-in 0.4s;
      &::after {
        transform:scale(2) skew(-45deg) translateX(0);
      }
    }
  }
  &.seven {
    color: $button_color7;
    border-color: $button_color7;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 100%;
      background-color: $button_color7;
      z-index: -1;
      -webkit-transform:translate(-50%, -50%) skew(-45deg);
      transform:translate(-50%, -50%) skew(-45deg);
      @extend %hover_ease_in_0_3s;
    }
    &:hover {
      color: #fff;
      &::after {
        width: 150%;
      }
    }
  }
  &.eight {
    color: $button_color8;
    border-color: $button_color8;
    box-shadow: 0 0 0 $button_color8, 0 0 0 $button_color8;
    &.filled {
      color: #fff;
      &::after {
        transform:scaleX(1);
        @extend %hover_ease_0_4s;
      }
    }
    &::after {
      content: "";
      background-color: $button_color8;
      z-index: -1;
      transform:scaleX(0);
      @extend %filled_obj;
    }
    &:hover {
      box-shadow: -6px -6px 0 $button_color8, 6px 6px 0 $button_color8;
      &::after {
        opacity: 0;
        transform:scaleX(1);
        @extend %hover_ease_0_4s;
      }
      &.filled {
        color: $button_color8;
        &::after {
          transform:scaleX(0);
        }
      }
    }
  }
  &.nine {
    color: $button_color9;
    border-color: $button_color9;
    overflow: visible;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: $button_color9;
      z-index: -1;
      box-shadow: 0 0 0 0 $button_color9;
      -webkit-transform:translate(-50%, -50%) scale(0);
      transform:translate(-50%, -50%) scale(0);
      transition:transform 0.2s linear;
    }
    &.rounded::after {
      border-radius: 28px;
    }
    &:hover {
      color: #fff;
      &::after {
        box-shadow: 0 0 0 24px transparent;
        -webkit-transform:translate(-50%, -50%) scale(1);
        transform:translate(-50%, -50%) scale(1);
        transition:transform 0.2s linear, box-shadow 0.5s ease-out 0.2s;
      }
    }
  }
  &.ten {
    color: $button_color10;
    border-color: $button_color10;
    box-shadow: inset 0 0 0 $button_color10, inset 0 0 0 $button_color10;
    transition-delay:0.2s;
    &::after {
      content: "";
      background-color: $button_color10;
      @extend %filled_obj;
      transform:scaleX(0) skewX(45deg);
      @extend %hover_ease_in_0_3s;
      opacity: 0.8;
      z-index: -1;
    }
    &:hover {
      color: #fff;
      box-shadow: inset 0 20px 0 $button_color10,
        inset 0 -20px 0 $button_color10;
      transition-delay:0s;
      &.hover-shadow {
        box-shadow: inset 0 20px 0 $button_color10,
          inset 0 -20px 0 $button_color10, 0 15px 12px -5px rgba(0, 0, 0, 0.24);
      }
      &::after {
        transition-delay:0.2s;
        transform:scaleX(1.2) skewX(45deg);
      }
    }
  }
  &.eleven {
    color: $button_color11;
    border-color: $button_color11;
    > .string {
      @extend %hover_ease_in_0_3s;
    }
    > .layer {
      &::before,
      &::after {
        background-color: $button_color11;
        width: 25%;
        @extend %hover_ease_in_0_3s;
      }
      &.one {
        &::before {
          transform:translateY(-100%);
        }
        &::after {
          transform:translate(100%, 100%);
        }
      }
      &.two {
        &::before {
          transform:translate(200%, -100%);
        }
        &::after {
          transform:translate(300%, 100%);
        }
      }
    }
    &:hover {
      > .string {
        color: #fff;
      }
      > .layer {
        &.one {
          &::before {
            transform:translateY(0);
          }
          &::after {
            transform:translate(100%, 0);
            transition-delay:0.1s;
          }
        }
        &.two {
          &::before {
            transform:translate(200%, 0);
            transition-delay:0.2s;
          }
          &::after {
            transform:translate(300%, 0);
            transition-delay:0.3s;
          }
        }
      }
    }
  }
  &.twelve {
    color: $button_color12;
    border-color: $button_color12;
    > .string {
      @extend %hover_ease_in_0_3s;
    }
    > .layer {
      &::before,
      &::after {
        background-color: $button_color12;
        opacity: 0.5;
        @extend %hover_ease_in_0_3s;
      }
      &.one {
        &::before {
          transform:translateY(-100%);
        }
        &::after {
          transform:translateY(100%);
        }
      }
      &.two {
        &::before {
          transform:translateX(-100%);
        }
        &::after {
          transform:translateX(100%);
        }
      }
    }
    &:hover {
      > .string {
        color: #fff;
        opacity: 0.8;
      }
      > .layer {
        &.one,
        &.two {
          &::before,
          &::after {
            transform:translate(0,0);
          }
        }
        &.two {
          &::before,
          &::after {
            transition-delay:0.3s;
          }
        }
      }
    }
  }
  &.thirteen {
    color: $button_color13;
    border-color: $button_color13;
    > .string {
      @extend %hover_ease_in_0_3s;
    }
    > .layer {
      perspective: 1000px;
      &::before,
      &::after {
        opacity: 0;
        background-color: $button_color13;
        width: 25%;
        transform-origin:right center;
        @extend %hover_ease_in_0_3s;
      }
      &.one {
        &::before {
          transform:rotateY(-88.1deg);
        }
        &::after {
          transform:translateX(100%) rotateY(-90deg);
        }
      }
      &.two {
        &::before {
          transform:translateX(200%) rotateY(-91.8deg);
        }
        &::after {
          transform:translateX(300%) rotateY(-93.6deg);
        }
      }
    }
    &:hover {
      > .string {
        color: #fff;
        opacity: 0.8;
      }
      > .layer {
        &::before,
        &::after {
          opacity: 1;
        }
        &.one {
          &::before {
            transform:rotateY(0);
          }
          &::after {
            transform:translateX(100%) rotateY(0);
            transition-delay:0.1s;
          }
        }
        &.two {
          &::before {
            transform:translateX(200%) rotateY(0);
            transition-delay:0.2s;
          }
          &::after {
            transform:translateX(300%) rotateY(0);
            transition-delay:0.3s;
          }
        }
      }
    }
  }
  &.fourteen {
    color: $button_color14;
    border-color: $button_color14;
    > .string {
      @extend %hover_ease_in_0_4s;
    }
    > .layer {
      &::before,
      &::after {
        background-color: $button_color14;
        opacity: 0.25;
        @extend %hover_ease_in_0_4s;
      }
      &.one {
        &::before {
          transform:skew(-45deg) translateX(-130%);
        }
        &::after {
          transform:skew(45deg) translateX(-130%);
        }
      }
      &.two {
        &::before {
          transform:skew(45deg) translateX(130%);
        }
        &::after {
          transform:skew(-45deg) translateX(130%);
        }
      }
    }
    &:hover {
      > .string {
        color: #fff;
      }
      > .layer {
        &::before,
        &::after {
          opacity: 0.8;
        }
        &.one {
          &::before {
            transform:skew(-45deg) translateX(-50%);
          }
          &::after {
            transform:skew(45deg) translateX(-50%);
          }
        }
        &.two {
          &::before {
            transform:skew(45deg) translateX(50%);
          }
          &::after {
            transform:skew(-45deg) translateX(50%);
          }
        }
      }
    }
  }
  &.fifteen {
    color: $button_color1;
    box-shadow: inset 0 0 0 2px $button_color1;
    border: none;
    > span {
      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border: 2px solid #fff;
        opacity: 0;
      }
      &::before {
        bottom: 0;
        left: 0;
        border-width: 2px 0 0 2px;
      }
      &::after {
        top: 0;
        right: 0;
        border-width: 0 2px 2px 0;
      }
    }

    &.filled {
      color: #fff;
      background-color: $button_color1;
    }
    &:hover {
      > span {
        &::before,
        &::after {
          opacity: 0.8;
          width: calc(100% - 2px);
          height: 100%;
        }
        &::before {
          @include transition(height 0.16s ease-out, width 0.16s ease-out 0.16s);
        }
        &::after {
          @include transition(opacity 0s ease-out 0.32s height 0.16s ease-out 0.32s, width 0.16s ease-out 0.48s);
        }
      }
      &.filled {
        color: $button_color1;
        background-color: transparent;
      }
      &.hover-shadow {
        box-shadow: inset 0 0 0 2px $button_color1,
          0 15px 12px -5px rgba(0, 0, 0, 0.24);
      }
    }
  }
  &.sixteen {
    color: $button_color2;
    border-color: $button_color2;
    &::after {
      content: "";
      background-color: $button_color2;
      opacity: 0.3;
      @extend %filled_obj;
      transform:translateX(-120%) skew(-45deg);
    }
    &:hover {
      box-shadow: 4px 4px 0 0 $button_color2, inset 4px 4px 0 0 $button_color2;
      &::after {
        @extend %hover_ease_0_3s;
        transform:translateX(120%) skew(-45deg);
      }
    }
    &.inverse {
      box-shadow: 4px 4px 0 0 $button_color2, inset 4px 4px 0 0 $button_color2;
      &::after {
        transform:translateX(120%) skew(-45deg);
      }
      &:hover {
        box-shadow: none;
        &::after {
          transform:translateX(-120%) skew(-45deg);
        }
      }
    }
  }
  &.seventeen {
    color: $button_color3;
    border-color: $button_color3;
    overflow: visible;
    &::after {
      content: "";
      box-shadow: 0 0 0 0 $button_color3;
      @extend %filled_obj;
    }
    &.rounded {
      &::after {
        border-radius: 28px;
      }
    }
    &:hover {
      text-shadow: 0 4px 18px $button_color3;
      &::after {
        opacity: 0;
        box-shadow: 0 0 0 24px $button_color3;
        @extend %hover_ease_out_0_8s;
      }
    }
  }
  &.eighteen {
    color: $button_color4;
    border-color: $button_color4;
    &.filled {
      color: #fff;
      background-color: $button_color4;
    }
    &:hover {
      border-color: transparent;
      padding: 15px 33px 21px 27px;
      box-shadow: inset -3px -3px 0px 3px $button_color4,
        5px 5px 0 0px $button_color4;
      &.filled {
        color: $button_color4;
        background-color: transparent;
      }
    }
  }
  &.nineteen {
    color: $button_color5;
    border-color: $button_color5;
    &.filled {
      color: #fff;
      background-color: $button_color5;
    }
    &:hover {
      &.filled {
        color: $button_color5;
        border-color: #fff;
        box-shadow: 0 0 0px 2px $button_color5, inset 0 0 0px 2px $button_color5,
          inset 0 0 0px 4px #fff, inset 0 0 0px 6px $button_color5,
          inset 0px 0px 0px 28px #fff;
      }
      &:not(.filled) {
        color: #fff;
        border-color: transparent;
        box-shadow: 0 0 0px 2px $button_color5, inset 0 0 0px 2px $button_color5,
          inset 0 0 0px 4px #fff, inset 0px 0px 0px 28px $button_color5;
      }
    }
  }
  &.twenty {
    color: $button_color6;
    border-color: transparent;
    overflow: visible;
    &::after {
      content: "";
      @extend %filled_obj;
      box-shadow: inset 0 0 0 0 $button_color6, 0 0 0 2px $button_color6;
    }
    &.rounded {
      &::after {
        border-radius: 26px;
      }
    }
    &:hover {
      border-color: $button_color6;
      &::after {
        opacity: 0;
        box-shadow: inset 0 0 0 26px $button_color6, 0 0 0 20px $button_color6;
        border: 13px solid #fff;
        @extend %hover_ease_out_0_8s;
      }
    }
  }
  &.twenty_one {
    color: $button_color7;
    border-color: $button_color7;
    overflow: visible;
    &::after {
      content: "";
      opacity: 0;
      visibility: hidden;
      box-shadow: 0 -24px 0 2px $button_color7, 24px 0 0 2px $button_color7,
        0 24px 0 2px $button_color7, -24px 0 0 2px $button_color7;
      @extend %filled_obj;
      z-index: -1;
    }
    &.rounded {
      &::after {
        border-radius: 26px;
      }
    }
    &:hover {
      color: #fff;
      box-shadow: inset 0 0 0 26px $button_color7;
      transition:box-shadow 0.2s ease-in 0.2s, color 0.2s ease-in 0.4s;
      &::after {
        opacity: 0.9;
        visibility: visible;
        box-shadow: 0 0 0 2px $button_color7, 0 0 0 2px $button_color7,
          0 0 0 2px $button_color7, 0 0 0 2px $button_color7;
        @extend %hover_ease_in_0_3s;
      }
      &.hover-shadow {
        box-shadow: inset 0 0 0 26px $button_color7,
          0 15px 12px -5px rgba(#000, 0.24);
      }
    }
  }
  &.twenty_two {
    color: $button_color8;
    border-color: $button_color8;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background-color: $button_color8;
      -webkit-transform:translate(-50%, -38%) scale(0.04);
      transform:translate(-50%, -38%) scale(0.04);
    }
    &:hover {
      color: #fff;
      &::after {
        animation:scaleBall 0.9s cubic-bezier(0.68, 0.21, 0.07, 1.54) both;
      }
    }
  }
  &.twenty_three {
    color: $button_color9;
    border-color: $button_color9;
    &::after {
      content: "";
      @extend %filled_obj;
      transition:all 0.4s cubic-bezier(0.37, 0.34, 0, 1.5);
      -webkit-transform:translate(-30%, -60%) rotate(-35deg);
      transform:translate(-30%, -60%) rotate(-35deg);
      transform-origin:left center;
      background-color: $button_color9;
      z-index: -1;
    }
    &.rounded {
      &::after {
        border-radius: 26px;
      }
    }
    &:hover {
      color: #fff;
      &::after {
        -webkit-transform:translate(0) rotate(0);
        transform:translate(0) rotate(0);
      }
    }
  }
  &.twenty_four {
    color: $button_color10;
    border-color: $button_color10;
    perspective: 1600px;
    overflow: visible;
    &::after {
      content: "";
      @extend %filled_obj;
      background-color: $button_color10;
      border: 2px solid #fff;
      z-index: -1;
      transform:translateZ(-1000px) rotateX(90deg);
      transition:box-shadow 0.2s ease-in, transform 0.2s ease-in 0.1s;
    }
    &.rounded {
      &::after {
        border-radius: 26px;
      }
    }
    &:hover {
      color: #fff;
      border-color: transparent;
      transition-delay:0.1s;
      &::after {
        box-shadow: 0 -10px 0 0 $button_color10, 10px 0 0 0 $button_color10,
          0 10px 0 0 $button_color10, -10px 0 0 0 $button_color10;
        transition:transform 0.2s ease-out, box-shadow 0.2s ease-out 0.1s;
        transform:translateZ(0) rotateX(0);
      }
    }
  }
  &.twenty_five {
    color: $button_color11;
    border-color: $button_color11;
    perspective: 800px;
    &::after {
      content: "";
      @extend %filled_obj;
      background-color: $button_color11;
      z-index: -1;
      transform:translateZ(-800px) translateX(-110%) rotateY(270deg);
    }
    &.filled {
      color: #fff;
      background-color: $button_color11;
    }
    &:hover {
      color: #fff;
      &::after {
        animation:scaleFromLeft 0.6s ease-in-out both;
      }
      &.filled {
        background-color: transparent;
      }
    }
  }
  &.twenty_six {
    color: $button_color12;
    border-color: $button_color12;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      transform:translate(-50%, -50%);
      transition:box-shadow 0.4s ease-out;
      z-index: -1;
    }
    &:hover {
      color: #fff;
      &::after {
        box-shadow: inset 0 0 0 200px $button_color12;
      }
    }
  }
  &.twenty_seven {
    color: $button_color13;
    border-color: $button_color13;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      transform:translate(-50%, -50%);
    }
    &:hover {
      color: #fff;
      background-color: $button_color13;
      &::after {
        animation:ripple 0.6s linear infinite;
      }
    }
  }
  &.twenty_eight {
    color: $button_color14;
    border-color: $button_color14;
    transition:color 0.2s ease-out 0.2s, background-color 0.2s ease-out 0.2s, box-shadow 0.2s ease-out 0.1s;
    &::after {
      content: "";
      box-shadow: inset 0 0 0 rgba(#000, 0.1), inset 0 0 0 rgba(#000, 0.1),
        inset 0 0 0 rgba(#000, 0.1), inset 0 0 0 rgba(#000, 0.1);
      @extend %filled_obj;
      transition:box-shadow 0.2s ease-out;
    }
    &:hover {
      color: #fff;
      background-color: $button_color14;
      box-shadow: inset 13px 0 0 rgba(#fff, 0.1), inset 26px 0 0 rgba(#fff, 0.1),
        inset -13px 0 0 rgba(#fff, 0.1), inset -26px 0 0 rgba(#fff, 0.1);
      transition:color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out 0.1s;
      &.hover-shadow {
        box-shadow: inset 13px 0 0 rgba(#fff, 0.1),
          inset 26px 0 0 rgba(#fff, 0.1), inset -13px 0 0 rgba(#fff, 0.1),
          inset -26px 0 0 rgba(#fff, 0.1), 0 15px 12px -5px rgba(0, 0, 0, 0.24);
      }
      &:active {
        transition:scale 0.3s ease;
      }
      &::after {
        box-shadow: inset 0 13px 0 rgba(#fff, 0.1),
          inset 0 26px 0 rgba(#fff, 0.1), inset 0 -13px 0 rgba(#fff, 0.1),
          inset 0 -26px 0 rgba(#fff, 0.1);
        transition-delay:0.3s;
      }
    }
  }
  &.twenty_nine {
    color: #fff;
    border-color: transparent;
    overflow: visible;
    perspective: 400px;
    &::after {
      content: "";
      @extend %filled_obj;
      background-color: $button_color1;
      box-shadow: 0 0 0 2px $button_color1;
      transform-origin:bottom center;
      @extend %hover_ease_0_3s;
      z-index: -1;
    }
    &.top {
      &::after {
        transform-origin:top center;
      }
    }
    &.rounded {
      &::after {
        border-radius: 26px;
      }
    }
    &:hover {
      color: $button_color1;
      box-shadow: inset 0 0 0 2px $button_color1, inset 0 0 0 4px #fff,
        inset 0 0 0 6px $button_color1;
      &::after {
        transform:rotateX(-95deg);
      }
      &.top {
        &::after {
          transform:rotateX(95deg);
        }
      }
    }
  }
  &.thirty {
    color: #fff;
    border: none;
    background: linear-gradient(
        to bottom,
        rgba(#fff, 0.4) 0,
        rgba(#fff, 0.18) 49%,
        rgba(#000, 0) 54%
      ),
      linear-gradient(to bottom, rgba(#000, 0.1) 0, rgba(#000, 0) 100%) #000;
    background-color: $button_color2;
    text-shadow: 0px -1px 0 rgba(#000, 0.7);
    box-shadow: inset 0px -26px 1px 0px rgba(#000, 0.08),
      inset 0px 26px 1px 0px rgba(#fff, 0.1), 0 2px 1px rgba(#000, 0.2);
    &::after {
      content: "";
      @extend %filled_obj;
      background-color: #fff;
      opacity: 0.18;
      transform:translateX(120%) skewX(-45deg);
    }
    &:hover {
      &.hover-shadow {
        box-shadow: inset 0px -26px 1px 0px rgba(#000, 0.08),
          inset 0px 26px 1px 0px rgba(#fff, 0.1),
          0 15px 12px -5px rgba(0, 0, 0, 0.24);
      }
      &::after {
        transform:translateX(-120%) skewX(-45deg);
        transition:transform 0.3s ease-in-out;
      }
    }
  }
}
@keyframes scaleBall {
  50% {
    -webkit-transform:translate(-50%, -50%) scale(0.04);
    transform:translate(-50%, -50%) scale(0.04);
  }
  100% {
    -webkit-transform:translate(-50%, -50%) scale(1);
    transform:translate(-50%, -50%) scale(1);
    z-index: -1;
  }
}
@keyframes scaleFromLeft {
  50% {
    transform:translateZ(-800px) translateX(0) rotateY(0);
  }
  100% {
    transform:translateZ(0) rotateY(-180deg);
  }
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(#fff, 0.1), 0 0 0 20px rgba(#fff, 0.1),
      0 0 0 40px rgba(#fff, 0.1), 0 0 0 60px rgba(#fff, 0.1);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(#fff, 0.1), 0 0 0 40px rgba(#fff, 0.1),
      0 0 0 60px rgba(#fff, 0.1), 0 0 0 80px rgba(#fff, 0);
  }
}
#svg-goo {
  width: 0;
  height: 0;
}

              
            
!

JS

              
                var buttons = $('.button');
$(function(){
  buttons.each(function(){
    var current = $(this);
    if (current.is('.three')) {
      current.append('<div class="slime"><span></span><span></span><span></span></div>');
    }
    if (current.is('.eleven, .twelve, .thirteen, .fourteen')) {
      current.wrapInner('<span class="string">').append('<span class="layer one"></span><span class="layer two"></span>');
    }
    if (current.is('.fifteen')) {
      current.wrapInner('<span>');
    }
  });
});
// Disable anchor navigate
$(document).on('click touchstart tap', 'a', function(e){
  e.preventDefault();
  return false;
});
              
            
!
999px

Console