Open / Close button with animation

index.haml

.open-close-button

open-close-button-with-animation.markdown

Open / Close button with animation

Use this little bit of CSS to make an aesthetically pleasing open / close button for all of your open/close needs.

A Pen by Murphy Randle on CodePen.

License.

script.coffeescript

openclose = () ->
  $(".open-close-button").click ->
    $(this).toggleClass("open");

jQuery(document).ready ($) ->
  openclose()

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

* {box-sizing: border-box;}

$color: #C9353B;
$contrast: lighten($color, 40%);
$transition-duration: 0.5s;

html {background-color: $color;}

.open-close-button {
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 0.1em solid $contrast;
  margin: 2em 45%;
  font-size: 3em;
  border-radius: 50%;
  position: relative;
  @include transition($transition-duration);
  @include translateZ(0); // Force 3D context.
  
  &:before {
    content: "";
    display: block;
    position: absolute;
    background-color: $contrast;
    width: 80%;
    height: 6%;;
    left: 10%;
    top: 47%;
  }
  
  &:after {
    content: "";
    display: block;
    position: absolute;
    background-color: $contrast;
    width: 6%;
    height: 80%;
    left: 47%;
    top: 10%;
  }
  
  &.open {
    background-color: $contrast;
    &:after {
      background-color: $color;
    }
    &:before {
      background-color: $color;
    }
    @include rotate(225deg);  
  }  
}