Beautiful Pure CSS3 Buttons

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;
}

Pages