We have now completed the first kind of buttons. Before moving on to the next one, we better pause for a second to realize that all the shadows and gradients we have coded are basically colorless; they simply add white or black to the underlying color. This means that we can choose a different background color for each button. So let's add the following code to application.css
:
/* puch */ #arcade_game .punch:after, #arcade_game .punch:before{ background-color: rgb(123,26,55); } #arcade_game .punch{ color: rgb(123,26,55); } /* jump */ #arcade_game .jump:after, #arcade_game .jump:before{ background-color: rgb(107,140,86); } #arcade_game .jump{ color: rgb(107,140,86); }
The following screenshot shows the result: