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

Best Ultimate Guide About Screen Coordinates to SVG Coordinates

March 29, 2022

3.3k

Navigator.sendBeacon() is great method in JavaScript

March 17, 2022

3.3k

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