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.

You might also like

A Comprehensive Guide to JavaScript Variable Declarations

January 25, 2023

Unlocking the Power of JavaScript Comments

January 20, 2023

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); 
    }
    
    .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