<h2>My close button</h2>
<a href="#" class="close-button"></a>
.close-button {
@size: 50px;
height: @size;
width: @size;
position: relative;
box-sizing: border-box;
line-height: @size;
display: inline-block;
&:before, &:after {
@width: 50px;
@height: 10px;
transform: rotate(-45deg);
content: '';
position: absolute;
top: 50%;
left: 50%;
margin-top: -@height/2;
margin-left: -@width/2;
display: block;
height: @height;
width: @width;
background-color: #fff;
transition: all 0.2s ease-out;
}
&:after {
transform: rotate(45deg);
}
&:hover {
&:before, &:after {
transform: rotate(0deg);
}
}
}
body {
color: #fff;
font-family: arial, sans-sarif;
background-color: #333;
text-align: center;
}
View Compiled
This Pen doesn't use any external CSS resources.