Home / Frontend Codes and Demos / CSS Code Demos / 3D CSS button plus jQuery
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.

3D CSS button plus jQuery

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.

Demo Download

Author Carlos G Notario
Hits
Created MAY 28, 2015
License Open
Compatible browsers Chrome, Firefox, Safari
{loadmodule mod_custom,Article Adsense Ads}

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

jQuery +3D css button Preview

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …