In the first part of this chapter we focus on creating a realistic coin-operated push button. We want to use as much CSS as possible and to take advantage of the new features without using images. The following screenshot is a glimpse of the result:
To start with, let's create a folder called shiny_buttons
, where we'll store all of the project's files. Then, we need a file, index.html
, filled with very little markup:
<!doctype html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta charset="utf-8"> <title>Shiny Buttons: from the reality to the web!</title> <link href='http://fonts.googleapis.com/css?family=Chango|Frijole| Alegreya+SC:700' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"> <link rel="stylesheet" type="text/css" href="css/application.css"> <script...