application.css

body, img, button {
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
    width: 100%;
    position: relative;
}        
        
img {
    left: 35%;
    position: absolute;
    max-width: 25%;
    width: 25%;
    top: 5%;
}

button {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 15em;
    width: 15em;
    border-radius: 50%;
    margin: -7.5em;

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(247,247,247,0.4)), to(rgba(231,231,231,0.4)));
    background-image: -webkit-linear-gradient(top, rgba(247,247,247,0.4), rgba(231,231,231,0.4)); 
    background-image: -moz-linear-gradient(top, rgba(247,247,247,0.4), rgba(231,231,231,0.4)); 
    background-image: -ms-linear-gradient(top, rgba(247,247,247,0.4), rgba(231,231,231,0.4)); 
    background-image: -o-linear-gradient(top, rgba(247,247,247,0.4), rgba(231,231,231,0.4)); 

    border-width: 0.25em;
    
    
    box-shadow: 0em 0.3em 2em rgb(170,170,170), inset 0em 0.2em 2em rgb(255,255,255);
}

_button:before {
  content: "";
  display: block;
  background: #fff;
  border-top: 2px solid #ddd;
  position: absolute;
  top: -18px;
  left: -18px;
  bottom: -18px;
  right: -18px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: inset 0px 8px 48px #ddd;
}

.invisible {
    -webkit-transition: opacity 0.45s ease-in-out;
       -moz-transition: opacity 0.45s ease-in-out;
        -ms-transition: opacity 0.45s ease-in-out;
         -o-transition: opacity 0.45s ease-in-out;
            transition: opacity 0.45s ease-in-out;

    opacity: 0;
    z-index: 0;
}

.visible {
    opacity: 1;
    z-index: 1;
}

/*EOF*/