Inspiration https://dribbble.com/shots/1621359-Open-Close-Icon-Animation
A Pen by Johnie Hjelm on CodePen.
<div class="wrapper"> | |
<button class="btn"> | |
View similar bookings | |
</button> | |
</div> |
$ -> | |
$(".btn").on 'click', -> | |
$(this).toggleClass 'active' | |
$("body").toggleClass 'active' | |
return false |
body{ | |
background-color: #008789; | |
padding: 0; | |
margin: 0; | |
transition: .2s background-color linear; | |
&.active{ | |
background-color: #D4233E; | |
} | |
} | |
.wrapper{ | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%) | |
} | |
.btn{ | |
font-size: 15px; | |
-webkit-appearance: none; | |
border: none; | |
color: #fff; | |
width: 5em; | |
height: 5em; | |
text-indent: -9999px; | |
background-color: transparent; | |
outline: none; | |
&:before, | |
&:after{ | |
content: ''; | |
display: block; | |
position: absolute; | |
width: 100%; | |
height: 0.7em; | |
background-color: #fff; | |
border-radius: 2em; | |
top: 45%; | |
transform: rotate(45deg); | |
transition: all .3s ease; | |
} | |
&:before{ | |
left: -1.55em; | |
} | |
&:after{ | |
transform: rotate(-45deg); | |
right: -1.55em; | |
} | |
&.active{ | |
&:before{ | |
left: 0; | |
} | |
&:after{ | |
right: 0; | |
} | |
} | |
} |