Shadow_ua,
макет надо делать самому ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.list-button {
position: relative;
margin-top: 180px;
left: 50%;
width: 80px;
height: 80px;
-webkit-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
-moz-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
-o-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
.list-button span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #00A690;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
.list-button span:nth-child(1) {
top: 0;
left: 0;
}
.list-button span:nth-child(2) {
top: 0;
right: 0;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
.list-button span:nth-child(3) {
bottom: 0;
left: 0;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
.list-button span:nth-child(4) {
bottom: 0;
right: 0;
}
@keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
@-webkit-keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
@keyframes loaderBlock {
0%, 30% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
55% {
background-color: #00e0c2;
}
100% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-webkit-keyframes loaderBlock {
0%, 30% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
55% {
background-color: #00e0c2;
}
100% {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes loaderBlockInverse {
0%, 20% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
55% {
background-color: #00e0c2;
}
100% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
@-webkit-keyframes loaderBlockInverse {
0%, 20% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
55% {
background-color: #00e0c2;
}
100% {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
.loader-button {
position: relative;
margin-top: 180px;
left: 50%;
width: 80px;
height: 80px;
-webkit-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
-moz-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
-o-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
-webkit-animation: loader 1.2s 1 ease-in-out;
-moz-animation: loader 1.2s 1 ease-in-out;
-o-animation: loader 1.2s 1 ease-in-out;
animation: loader 1.2s 1 ease-in-out;
}
.loader-button span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #00A690;
-webkit-animation: loaderBlock 1.2s 1 ease-in-out both;
-moz-animation: loaderBlock 1.2s 1 ease-in-out both;
-o-animation: loaderBlock 1.2s 1 ease-in-out both;
animation: loaderBlock 1.2s 1 ease-in-out both;
}
.loader-button span:nth-child(1) {
top: 0;
left: 0;
}
.loader-button span:nth-child(2) {
top: 0;
right: 0;
-webkit-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
-moz-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
-o-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
animation: loaderBlockInverse 1.2s 1 ease-in-out both;
}
.loader-button span:nth-child(3) {
bottom: 0;
left: 0;
-webkit-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
-moz-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
-o-animation: loaderBlockInverse 1.2s 1 ease-in-out both;
animation: loaderBlockInverse 1.2s 1 ease-in-out both;
}
.loader-button span:nth-child(4) {
bottom: 0;
right: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$('#button').on('click', function(event){
event.preventDefault();
$(this).toggleClass('loader-button list-button');
});
$('#button span:last').on('webkitAnimationEnd animationend', function() {
$('#button').trigger('click')
});
});
</script>
</head>
<body>
<div class="loader-button" id="button">
<a href="#portfolio">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</div>
</body>
</html>