Css close button implementation, css close button

Css close button implementation, css close button

It is implemented through the pseudo elements of css: before,: after and transform: rotate (45deg); rotation (IE9 and later versions are supported)

<Div class = "close"> </div>

/* Close the icon */. close {position: absolute; right:-25px; top:-25px; width: 50px; height: 50px; background: silver; border-radius: 25px; box-shadow: 2px 2px 5px 0px black; cursor: pointer ;}. close: hover {background: red ;}. close: before {position: absolute; content: ''; width: 30px; height: 10px; background: white; transform: rotate (45deg); top: 20px; left: 10px ;}. close: after {content: ''; position: absolute; width: 30px; height: 10px; background: white; transform: rotate (-45deg); top: 20px; left: 10px ;}

: