<a class="close-modal-button"></a>
$color-black: #000;
$color-light-red: #ba3242;
body{
background: url("http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/11/texture5.jpg");
}
.close-modal-button{
position: absolute;
right: 50%;
top: 50%;
z-index: 10;
background-color: #fff;
border-radius: 4em;
height: 4em;
width: 4em;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
&:before{
position: absolute;
left: 50%;
top: 50%;
font-family: fontAwesome;
content: "\f00d";
color: $color-black;
font-size: 3em;
transform: translate(-50%, -50%);
}
&:hover:before{
color: $color-light-red;
transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transform: translate(-55%, -48%) rotate(-0.25turn);
transform: translate(-55%, -48%) rotate(-0.25turn); /*Had to bump it b/c the dimensions are not square*/
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.