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