Agenda
HTML5 and CSS3 features give us great opportunity to create rich animated user interfaces comparable with desktop versions. Here I will explain how to create rich UI button with custom HTML content and CSS3 tools only, without using javascript and images.
I am not going to explain details of an appropriate CSS3 style, but a live demo will be attached to every step, so you will be able to see how it affects different browsers.
Layout
Let's specify a general .button
class, with some default styles. The class will be suitable for different kinds of tags to make them look like rich UI button.