Thursday, March 14, 2013

Animated Anchor and Button with CSS3

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.