<section>
      <input type="checkbox" id="checkmate"/>
    <label for="checkmate" > <span></span></label>
</section>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
$width:50px; 
$height:5px;
*,*:after, *:before{box-sizing:border-box;}

.fill{width:100%;height:100%;}
.center{display:flex;justify-content:center;align-items:center;}
html,body,section{@extend .center; @extend .fill;margin:0;padding:0;}
body{height:100vh;overflow:hidden;background-color:#9FC2CC;}

section{
  
  [type="checkbox"]{
    display:none;
    ~ label{cursor:pointer; display:block;}
    &:checked{
      ~ label{ 
        span{
          background-color:transparent;
          &:before{transform:rotate(-210deg);top:$height;}
          &:after{transform:rotate(210deg);top:$height;}
        }
      }
    }
  }
  span{
      position:relative;
      background:white;
       height:$height;width:$width;
      background-color:white;
     border-radius:5px;
    display:block;
    transition:background 1s ease;
    &:before, &:after{
      content:""; position:absolute; width:$width;height:$height;background:white; 
      border-radius:5px;
      transform:rotate(0deg);
      transition:transform 1s ease, bottom 1s ease, top 1s ease;
    }
    &:before{
      top:-$height * 2 ;left:0;
    }
   &:after{
     top:$height * 2 ;left:0;
    }
  }
  
}
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js