Animated Close Button

Animated Close Button.markdown

Animated Close Button

Rotating close icon on hover Using css3 transforms and :before and :after pseudo classes

A Pen by Kannan Kumar on CodePen.

License.

index.html

<div class="close_btn"></div>

style.css

 body {
   width: 100%;
   height: 100vh;
   margin: auto;
 }
 
 .close_btn {
   position: absolute;
   /*
   EDIT :  left, top, width, height -> to customize container of cross lines
   Keep container so as to just fit the cross lines. Not bigger
  */
   
   left: 40%;
   top: 40%;
   width: 200px;
   height: 200px;
   color: black;
   -webkit-transition: -webkit-transform 1.8s;
   transition: transform 1.8s;
   cursor: pointer;
 }
 
 .close_btn:hover {
   /*
   EDIT :  rotate degrees -> to customize how many rotations on hover
                        [90 = half, 180 = 1 rotation, 360 = 2 rotations]
             */
   
   -webkit-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 
 .close_btn:before {
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 
 .close_btn:after {
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
 
 .close_btn:before,
 .close_btn:after {
   content: "";
   position: absolute;
   left: 0px;
   top: 80px;
   /*
   EDIT:   width and height -> customize cross lines according to size requirements
           Maintain ratio of width:height ~> 11:1
   EDIT:   background -> for color of cross lines
   */
   
   width: 200px;
   height: 32px;
   background: gray;
 }