Almost done! Now we need to make the button a bit more responsive. To achieve this, we can take advantage of the :active
pseudo-selector to modify some shadows. Let's add the following lines to application.css
:
/* active */
#arcade_game a:active:before{
background-image: none;
box-shadow:
0px 0px 7px rgba(0,0,80,0.7),
0px 0px 4px rgba(0,0,0,0.4),
10px 10px 20px rgba(0,0,0,0.3) inset;
line-height: 65px;
}
#arcade_game a:active:after{
background-image:
-moz-radial-gradient(7px 7px, ellipse farthest-side,
rgba(255,255,255,0.8), rgba(255,255,255,0.6) 3px,
rgba(200,200,200,0.0) 20px),
-moz-radial-gradient(53px 53px, rgba(255,255,255,0),
rgba(255,255,255,0) 33px, rgba(255,255,255,0.3) 36px,
rgba(255,255,255,0.3) 36px, rgba(255,255,255,0) 36px);
background-image:
radial-gradient(7px 7px, ellipse farthest-side,
rgba(255,255,255,0.8), rgba(255,255,255,0.6) 3px,
rgba(200,200,200,0.0) 20px),
radial-gradient...