A Pen by Jesse Black.

index.html

<div></div>

Menu-icon-to-Close-Icon.markdown

Menu icon to Close Icon

I saw something similar to this on another website(I forget which one) and I thought I would take a stab at creating my own.

A Pen by Jesse Black on CodePen.

License.

style.scss

@import "compass";
//Change to preference
$btn-sq-size:4em;
$color-menu:gray;
$color-close:darkred;

//Don't change variables below
$btn-Line-Width:100%;
$btn-Line-Height:$btn-sq-size/5;

div{ position:relative; box-sizing:border-box; width:$btn-sq-size; height:$btn-sq-size; border-top:$btn-Line-Height solid $color-menu; border-bottom:$btn-Line-Height solid $color-menu; transition:border-color 0.5s;
  &:before,&:after{ content:""; display:block; position:absolute; top:$btn-Line-Height; width:$btn-Line-Width; height:$btn-Line-Height; background:$color-menu; transform:rotate(0deg); transition:transform 0.5s; }
  &:hover{border-color:transparent;
    &:before,&:after{ background-color:$color-close; }
    &:before{ transform:rotate(45deg); }
    &:after{ transform:rotate(-45deg); }
  }
}