<a class="close-button" href="/">Close</a>
.transition (@prop: all, @time: 1s, @ease: ease-out) {
transition : @prop @time @ease;
transition : @prop @time @ease;
transition : @prop @time @ease;
transition : @prop @time @ease;
transition : @prop @time @ease;
}
.rotate(@degrees) {
transform : rotate(@degrees);
transform : rotate(@degrees);
transform : rotate(@degrees);
transform : rotate(@degrees);
transform : rotate(@degrees);
}
.square( @size ){
width: @size;
height: @size;
}
@black : #000;
@white : #fff;
// ---- [ Close Button ] ---- //
.close-button{
.square(150px);
box-shadow : 0px 10 10px 10px rgba( 0, 0, 0, .25 );
border-radius: 10px;
background : @black;
left : 50%;
top : 50%;
margin-top : -75px;
margin-left: -75px;
position : absolute;
display : block;
z-index : 200;
text-indent : -9999px;
&:before,
&:after{
content : '';
width : 55%;
height : 2px;
background : @white;
position : absolute;
top : 48%;
left : 22%;
.rotate(-45deg);
.transition( @time : 0.3s );
}
&:after{
.rotate(45deg);
.transition( @time : 0.3s );
}
&:hover{
&:before,
&:after{
.rotate(180deg);
}
}
}
body{
background: #a7cfdf;
background: linear-gradient(45deg, #a7cfdf 0%, #23538a 100%);
background: gradient(linear, left bottom, right top, color-stop(0%,#a7cfdf), color-stop(100%,#23538a));
background: linear-gradient(45deg, #a7cfdf 0%,#23538a 100%);
background: linear-gradient(45deg, #a7cfdf 0%,#23538a 100%);
background: linear-gradient(45deg, #a7cfdf 0%,#23538a 100%);
background: linear-gradient(45deg, #a7cfdf 0%,#23538a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=1 );
}
View Compiled
This Pen doesn't use any external CSS resources.