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