3D CSS button plus jQuery

jQuery + 3D css button.Button created for the gamers league project v2 version. 3D button developed using CSS, HTML and jQuery. Demo and download available.

HTML Snippet

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  <link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>  <a class="square" href="#">     <div class="burgerwrap">         <span></span>         <span></span>         <span></span>     </div> </a>  <a href="#" class="boton"> Fantastic     </a>

CSS Code

 html, body {         background: #1f1d21;     }          .boton {         width: 200px;         height: 50px;         margin: 200px auto;         display: block;         position: relative;     }          .botontext {         position: absolute;         height: 100%;         width: 100%;         z-index: 1;         text-align: center;         line-height: 50px;         font-family: 'Montserrat', sans-serif;         font-size: 12px;         text-transform: uppercase;     }          .twist {         display: block;         height: 100%;         width: 25%;         position: relative;         float: left;         margin-left: -4px;     }          .twist:before {         content: "";         width: 100%;         height: 100%;         background: #fed5a9;         bottom: 100%;         position: absolute;         transform-origin: center bottom 0px;          transform: matrix3d(1, 0, 0, 0,                              0, 0, -1, -0.003,                              0, 1, 0, 0,                              0, 0, 0, 1);          -webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);     -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);       -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);          transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */     }          .twist:after {         content: "";         position: absolute;         width: 100%;         top: 100%;         height: 100%;         background: #9f7f5e;         transform-origin: center top 0px;         transform: matrix3d(1, 0, 0, 0,                              0, 1, 0, 0,                              0, 0, 1, -0.003,                              0, -50, 0, 1);          -webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);     -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);       -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);          transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */     }          .boton:hover .twist:before {         background: #fff;         transform: matrix3d(1, 0, 0, 0,                              0, 1, 0, 0,                              0, 0, 1, 0.003,                              0, 50, 0, 1);     }          .boton:hover .twist:after {         background: #dedae1;         transform: matrix3d(1, 0, 0, 0,                              0, 0, -1, 0.003,                              0, 1, 0, 0,                              0, 0, 0, 1);     }      .boton .twist:nth-of-type(1) {         margin-left: 0;     }          .boton .twist:nth-of-type(1):before,     .boton .twist:nth-of-type(1):after {         transition-delay: 0s;     }          .boton .twist:nth-of-type(2):before,     .boton .twist:nth-of-type(2):after {         transition-delay: 0.1s;     }          .boton .twist:nth-of-type(3):before,     .boton .twist:nth-of-type(3):after {         transition-delay: 0.2s;     }          .boton .twist:nth-of-type(4):before,     .boton .twist:nth-of-type(4):after {         transition-delay: 0.3s;     }          .boton .botontext:nth-of-type(1) {         color: #3d3b40;         bottom: 100%;         transform-origin: center bottom 0px;          transform: matrix3d(1, 0, 0, 0,                              0, 0, -1, -0.003,                              0, 1, 0, 0,                              0, 0, 0, 1);          -webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);     -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);       -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);          transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */     }          .boton:hover .botontext:nth-of-type(1) {         transform: matrix3d(1, 0, 0, 0,                              0, 1, 0, 0,                              0, 0, 1, 0.003,                              0, 50, 0, 1);     }          .boton .botontext:nth-of-type(2) {         color: #fff;         top: 100%;         transform-origin: center top 0px;         transform: matrix3d(1, 0, 0, 0,                              0, 1, 0, 0,                              0, 0, 1, -0.003,                              0, -50, 0, 1);          -webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);     -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);       -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);          transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */     }          .boton:hover .botontext:nth-of-type(2) {         transform: matrix3d(1, 0, 0, 0,                              0, 0, -1, 0.003,                              0, 1, 0, 0,                              0, 0, 0, 1);     }      /*MENU*/          .square {         border: 1px solid #9f7f5e;         height: 26px;         width: 26px;         display: block;         margin: 40px auto;         transform: rotate(45deg);         overflow: hidden;          -webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);     -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);       -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);          transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */     }           .square .burgerwrap {         height: 18px;         width: 21px;         transform: rotate(-45deg);         padding-left: 5px;         padding-top: 8px;           -webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);     -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);       -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);          transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */     }          .square:hover {         transform: rotate(135deg);         border: 1px solid #fff;     }          .square:hover .burgerwrap {         transform: rotate(-135deg)     }          .square span {         height: 2px;         width: 14px;         background: #9f7f5e;         display: block;         margin-bottom: 2px;          -webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);     -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);       -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);          transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */     }          .square span:after {         content: "";         height: 2px;         width: 14px;         position: absolute;         background: #fff;         left: -19px;          -webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);     -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);       -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);          transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */     }          .square:hover span {         margin-left: 26px;     }          .square:hover span:after {         left: 5px;     }          .square span:nth-of-type(1),     .square span:nth-of-type(1):after {         transition-delay: 0.1s;     }          .square span:nth-of-type(2),     .square span:nth-of-type(2):after {         transition-delay: 0.2s;     }          .square span:nth-of-type(3),     .square span:nth-of-type(3):after {         transition-delay: 0.3s;     }

JavaScript Snippet

 $(window).ready(function(){ $(".boton").wrapInner('<div class=botontext></div>');          $(".botontext").clone().appendTo( $(".boton") );          $(".boton").append('<span class="twist"></span><span class="twist"></span><span class="twist"></span><span class="twist"></span>');          $(".twist").css("width", "25%").css("width", "+=3px"); });

Preview