we will be making some cool CSS3 buttons. They are based on the Futurico User Interface by Vladimir Kudinov and we will try to make a precise copy of them. Let’s get started…
Step 1 – HTML
The HTML is very simple, we’ll just create 3 anchor tags with the class of ‘button’ and since we will create three different colors styles we will give to each link a different color class
<a href="#" class="button green">button</a> <a href="#" class="button blue">button</a> <a href="#" class="button gray">button</a>
Step 2 – Basic CSS Styling
Now we will start to give the basic shape and styles for the buttons. We’ll use the ‘display: inline-block’ property to be able to use it as a block element and to tolerate others HTML elements next to it. The others properties are basic CSS2 styles, you should not have difficulty to understand them.
.button { display: inline-block; position: relative; margin: 10px; padding: 0 20px; text-align: center; text-decoration: none; font: bold 12px/25px Arial, sans-serif; }Before getting in the CSS3 part let’s just add some basic background and text colors for each color style.
.green { color: #3e5706; background: #a5cd4e; } /* Blue Color */ .blue { color: #19667d; background: #70c9e3; } /* Gray Color */ .gray { color: #515151; background: #d3d3d3; }Read more:http://designmodo.com/create-css3-buttons/