index.html

<div class="wrapper">
  <button class="btn">
    View similar bookings
  </button>
</div>

script.coffee

$ ->
  $(".btn").on 'click', ->
    $(this).toggleClass 'active'
    $("body").toggleClass 'active'
    return false

Simple-button-concept.markdown

Simple button concept

Inspiration https://dribbble.com/shots/1621359-Open-Close-Icon-Animation

A Pen by Johnie Hjelm on CodePen.

License.

style.scss

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