<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);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -moz-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;
    -webkit-transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
    -moz-transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
    -o-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;
    -webkit-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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.