<button class="button">
  <span class="button__inner">3D Button</span>
</button>

<button class="button button--secondary">
  <span class="button__inner">Submit</span>
</button>

* {
  box-sizing: border-box;
}
//Button style
.button {
  font-size: 5vw;
  @media (min-width: 40em) {
    font-size: 2em;
  }
  border: none;
  background-color: rgb(235,235,240);
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  user-select: none;
  position: relative;
  z-index: 1;
  padding: 0;
  
  //shadow
  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 10px;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,10,50,0.2);
    transition: transform 0.6s cubic-bezier(0,.90,.13,.90);
    transform: translate3D(0, 0, 0);
  }
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(235,235,240);
    z-index: -1;
  }
  &:hover, &:focus {
    &:before {
      transform: translate3D(10px, 0, 0);  
    }
  }
  &:active {
    &:before {
      transform: translate3D(0, 0, 0);  
    }
  }
  // End Shadow
  &:focus, &:active {
    outline: none;    
  }
  
  //The button-part with the text
  .button__inner {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #333;
    padding: 1em 1.5em;
    background-color: #fbfbfb;
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0,.90,.13,.90);
    position: relative;
  }
  &:hover, &:focus {
    .button__inner {
      transform: translate3D(0, -10px, 0);
    }
  }
  &:active .button__inner {
    transform: translate3D(0, 0, 0);
  }
  &:hover, &:focus {
    .button__inner{
      background-color: #fff;
    }
  }
}

//Secondary style
.button--secondary {
  background-color: #00d18e;
  z-index: 0;
  &:after {
    background-color: #00d18e;
  }
  .button__inner{
    background-color: #00ffb2;
  }
  &:hover, &:focus {
    .button__inner{
      background-color: #11ffb3;
    }
  }
}

//Styling for layout
@import url(https://fonts.googleapis.com/css?family=Dosis);

html, body {
  background-color: #fbfbfb;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: 'Dosis', cursive;
}

//Some texture
html, body, .button__inner {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5OS4zNCIgaGVpZ2h0PSI5OS44NiIgdmlld0JveD0iMCAwIDk5LjM0IDk5Ljg2Ij48dGl0bGU+cmFuZG9tX2RvdHMtLWxhcmdlPC90aXRsZT48Y2lyY2xlIGN4PSI4IiBjeT0iNjIuNDEiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjAzIi8+PGNpcmNsZSBjeD0iMjUuNzgiIGN5PSI1MS4wNiIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSIzNi4yOCIgY3k9Ijc0Ljg3IiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAzYTAzO29wYWNpdHk6MC4wNyIvPjxjaXJjbGUgY3g9IjQ1LjA3IiBjeT0iNzIuNTUiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMTAuNyIgY3k9IjkwLjk5IiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjMxLjA3IiBjeT0iOTYuNCIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwM2EwMztvcGFjaXR5OjAuMDciLz48Y2lyY2xlIGN4PSI0OC4yIiBjeT0iNTMuNzUiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjAzIi8+PGNpcmNsZSBjeD0iMS4wNiIgY3k9IjgxLjgxIiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjI3LjgxIiBjeT0iNjIuODciIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMjIuMzUiIGN5PSI4Ni43OSIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDMiLz48Y2lyY2xlIGN4PSI0Ny43NSIgY3k9Ijg4LjkiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNDAuMzkiIGN5PSI2Ni4zIiByPSIxLjA2IiBzdHlsZT0iZmlsbDojM2EwMDJiO29wYWNpdHk6MC4wNyIvPjxjaXJjbGUgY3g9IjE3LjI0IiBjeT0iNjkuODIiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMzYTAwMmI7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iMTguNDIiIGN5PSI3NS45MiIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI2Ljk0IiBjeT0iNzUuNDMiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iOC40OSIgY3k9IjU1LjY2IiByPSIwLjQ5IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjI5LjUzIiBjeT0iNTQuODEiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNDMuNTMiIGN5PSI3OC44NSIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSIzOC44NCIgY3k9IjkwLjk5IiByPSIwLjQ5IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNiIvPjxjaXJjbGUgY3g9IjQ5LjI2IiBjeT0iNjAuNTUiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMjYuOTQiIGN5PSI4OC45IiByPSIwLjQ5IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjMwLjAyIiBjeT0iODMuMTciIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMTcuNTEiIGN5PSI1Ny41OSIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI3LjYyIiBjeT0iODcuODQiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA2Ii8+PGNpcmNsZSBjeD0iMi43MiIgY3k9IjcwLjY5IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjM5LjAyIiBjeT0iNTMuOTkiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDNhMDM7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iMTYuNzUiIGN5PSI5OC4xNSIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzNhMDAyYjtvcGFjaXR5OjAuMDciLz48Y2lyY2xlIGN4PSI0NC4wMSIgY3k9Ijk1Ljc4IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjExLjc1IiBjeT0iNzguMzYiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDNhMDM7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iMy43OCIgY3k9Ijk1LjExIiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjI2Ljc2IiBjeT0iNzQuODciIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMy4zIiBjeT0iNTEuODgiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMzYTAwMmI7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iOTAuNTEiIGN5PSIzOC43NiIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDMiLz48Y2lyY2xlIGN4PSI3Mi43MyIgY3k9IjUwLjExIiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjYyLjIzIiBjeT0iMjYuMyIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwM2EwMztvcGFjaXR5OjAuMDciLz48Y2lyY2xlIGN4PSI1My40NCIgY3k9IjI4LjYyIiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjgzLjQyIiBjeT0iMTAuMTgiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNjcuNDQiIGN5PSIxMC4xOCIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwM2EwMztvcGFjaXR5OjAuMDciLz48Y2lyY2xlIGN4PSI1MC4zMSIgY3k9IjQ3LjQyIiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wMyIvPjxjaXJjbGUgY3g9Ijk3LjQ1IiBjeT0iMTkuMzYiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNzAuNyIgY3k9IjMxLjA5IiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9Ijc2LjE3IiBjeT0iMTQuMzgiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjAzIi8+PGNpcmNsZSBjeD0iNTAuNzYiIGN5PSIxMi4yNyIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI1OC4xMiIgY3k9IjM0Ljg3IiByPSIxLjA2IiBzdHlsZT0iZmlsbDojM2EwMDJiO29wYWNpdHk6MC4wNyIvPjxjaXJjbGUgY3g9Ijc4Ljc3IiBjeT0iMzUuNTciIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMzYTAwMmI7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iODAuMDkiIGN5PSIyNS4yNCIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI5MS41NyIgY3k9IjI1LjczIiByPSIwLjQ5IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjkwLjAyIiBjeT0iNDUuNSIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI2OC45OCIgY3k9IjQ2LjM2IiByPSIwLjQ5IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjU0Ljk4IiBjeT0iMjIuMzEiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNTkuNjciIGN5PSIxMC4xOCIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDYiLz48Y2lyY2xlIGN4PSI1NC4wMSIgY3k9IjQxLjkiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNjguOTgiIGN5PSIxNC4zOCIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI2My4yOCIgY3k9IjE4LjMiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iODEiIGN5PSI0My41NyIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI5MC44OSIgY3k9IjE0Ljk5IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNiIvPjxjaXJjbGUgY3g9Ijk1Ljc5IiBjeT0iMzAuNDciIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNTkuNDkiIGN5PSI0Ny4xNyIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzAwM2EwMztvcGFjaXR5OjAuMDciLz48Y2lyY2xlIGN4PSI4MS43NiIgY3k9IjMuMDIiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMzYTAwMmI7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iNTQuNSIgY3k9IjUuMzgiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iODUuOTMiIGN5PSIyMS44MyIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzAwM2EwMztvcGFjaXR5OjAuMDciLz48Y2lyY2xlIGN4PSI5My4wNiIgY3k9IjMuMzQiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNzYuMTciIGN5PSIxOS4zNiIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI5NS4yMSIgY3k9IjQ5LjI4IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojM2EwMDJiO29wYWNpdHk6MC4wNyIvPjxjaXJjbGUgY3g9IjguMSIgY3k9IjEyLjQxIiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wMyIvPjxjaXJjbGUgY3g9IjI1Ljg5IiBjeT0iMS4wNiIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSIzNi4zOSIgY3k9IjI0Ljg3IiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAzYTAzO29wYWNpdHk6MC4wNyIvPjxjaXJjbGUgY3g9IjQ1LjE3IiBjeT0iMjIuNTUiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMTAuOCIgY3k9IjQwLjk5IiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjM3IiBjeT0iNDYuNzciIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDNhMDM7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iNDguMyIgY3k9IjMuNzUiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjAzIi8+PGNpcmNsZSBjeD0iMS4xNiIgY3k9IjMxLjgxIiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjI3LjkxIiBjeT0iMTIuODciIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMjIuNDUiIGN5PSIzNi43OSIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDMiLz48Y2lyY2xlIGN4PSI0Ny44NSIgY3k9IjM4LjkiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNDAuNDkiIGN5PSIxNi4zIiByPSIxLjA2IiBzdHlsZT0iZmlsbDojM2EwMDJiO29wYWNpdHk6MC4wNyIvPjxjaXJjbGUgY3g9IjE3LjM0IiBjeT0iMTcuMDQiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMzYTAwMmI7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iMTguNTIiIGN5PSIyNS45MiIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI3LjA1IiBjeT0iMjUuNDMiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iOC41OSIgY3k9IjUuNjYiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMjkuNjMiIGN5PSI0LjgxIiByPSIwLjQ5IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjQzLjYzIiBjeT0iMjguODUiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMzguOTQiIGN5PSI0MC45OSIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDYiLz48Y2lyY2xlIGN4PSI0Ni43IiBjeT0iOS4yNiIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSIyOS42MyIgY3k9IjM5Ljk1IiByPSIwLjQ5IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjM1LjMzIiBjeT0iMzIuODYiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMTcuNjEiIGN5PSI3LjU5IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjcuNzIiIGN5PSIzNy44NCIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDYiLz48Y2lyY2xlIGN4PSIyLjgyIiBjeT0iMjAuNjkiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iMzkuMTMiIGN5PSIzLjk5IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAzYTAzO29wYWNpdHk6MC4wNyIvPjxjaXJjbGUgY3g9IjE2Ljg2IiBjeT0iNDguMTUiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMzYTAwMmI7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iNDMuNTMiIGN5PSI0My40NCIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSIxMy41MiIgY3k9IjMxLjQ2IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAzYTAzO29wYWNpdHk6MC4wNyIvPjxjaXJjbGUgY3g9IjMuODgiIGN5PSI0NS4xMSIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSIyNi44NiIgY3k9IjI0Ljg3IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjMuNCIgY3k9IjEuODgiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMzYTAwMmI7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iNTguMDgiIGN5PSI2Mi40NSIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDMiLz48Y2lyY2xlIGN4PSI3NS44NyIgY3k9IjUxLjA5IiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9Ijg2LjM3IiBjeT0iNzQuOTEiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDNhMDM7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iOTUuMTUiIGN5PSI3Mi41OSIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI2MC43OCIgY3k9IjkxLjAzIiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjgxLjE2IiBjeT0iOTYuNDQiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDNhMDM7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iOTguMjgiIGN5PSI1My43OSIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDMiLz48Y2lyY2xlIGN4PSI1MS4xNCIgY3k9IjgxLjg1IiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9Ijc3Ljg5IiBjeT0iNjIuOTEiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNjYuNzYiIGN5PSI4Ny44NCIgcj0iMS4wNiIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDMiLz48Y2lyY2xlIGN4PSI5Ny44NCIgY3k9Ijg4Ljk0IiByPSIxLjA2IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjkwLjQ3IiBjeT0iNjYuMzQiIHI9IjEuMDYiIHN0eWxlPSJmaWxsOiMzYTAwMmI7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iNjcuMzMiIGN5PSI2OS44NiIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzNhMDAyYjtvcGFjaXR5OjAuMDciLz48Y2lyY2xlIGN4PSI3MS42IiBjeT0iNzcuODgiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNTcuMDMiIGN5PSI3NS40NyIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI1OC41NyIgY3k9IjU1LjciIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNzkuNjEiIGN5PSI1NC44NCIgcj0iMC40OSIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI5My42MSIgY3k9Ijc4Ljg5IiByPSIwLjQ5IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9Ijg4LjkzIiBjeT0iOTEuMDMiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA2Ii8+PGNpcmNsZSBjeD0iOTEuNiIgY3k9IjU4LjgxIiByPSIwLjQ5IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9Ijc5LjYxIiBjeT0iODYuODMiIHI9IjAuNDkiIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iODAuMSIgY3k9Ijg1LjczIiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjY3LjMzIiBjeT0iNjAuOTMiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNTcuNyIgY3k9Ijg3Ljg4IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNiIvPjxjaXJjbGUgY3g9IjUyLjgxIiBjeT0iNzAuNzMiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNjQuOTUiIGN5PSIxLjY3IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAzYTAzO29wYWNpdHk6MC4wNyIvPjxjaXJjbGUgY3g9IjY2Ljg0IiBjeT0iOTguMTkiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMzYTAwMmI7b3BhY2l0eTowLjA3Ii8+PGNpcmNsZSBjeD0iOTQuMSIgY3k9Ijk1LjgyIiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAwZjNjO29wYWNpdHk6MC4wNSIvPjxjaXJjbGUgY3g9IjYzLjUiIGN5PSI4MS41IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojMDAzYTAzO29wYWNpdHk6MC4wNyIvPjxjaXJjbGUgY3g9IjQyLjM1IiBjeT0iODQuODQiIHI9IjEuNjciIHN0eWxlPSJmaWxsOiMwMDBmM2M7b3BhY2l0eTowLjA1Ii8+PGNpcmNsZSBjeD0iNzYuODQiIGN5PSI3NC45MSIgcj0iMS42NyIgc3R5bGU9ImZpbGw6IzAwMGYzYztvcGFjaXR5OjAuMDUiLz48Y2lyY2xlIGN4PSI1My41MiIgY3k9IjUzLjk5IiByPSIxLjY3IiBzdHlsZT0iZmlsbDojM2EwMDJiO29wYWNpdHk6MC4wNyIvPjwvc3ZnPg==);
}

//TODO: Delete Button 1's shadow when its focus && buttons 2 is hover