Submit your widget

Beautiful Pure CSS3 Buttons

Created 11 years ago   Views 27586   downloads 6569    Author designmodo
Beautiful Pure CSS3 Buttons
View DemoDownload
Share |

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: