Rotating close icon on hover Using css3 transforms and :before and :after pseudo classes
A Pen by Kannan Kumar on CodePen.
<div class="close_btn"></div> |
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; | |
} |