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/
