Beautiful Pure CSS3 Buttons

Home Buttons & IconsBeautiful Pure CSS3 Buttons

Beautiful Pure CSS3 Buttons

12 years ago Views

27951

6740

designmodo

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

Tag: css3 buttons