In this article we are going to create buttons without using any images with the help of a few wonderful new css features provided by CSS3.
Let’s start off by taking a look at what our output will look like once we created our css classes.
Firstly we will create a class called ‘button’ where we will define the basic styling properties for every button we want on our website. Without going into the details of explaining every property being used lets take a look at the CSS code.
CSS CODE:
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
Here we have defined the basic css properties for the default, :hover and :active states for every button.
Next up we will define a css class for the different colors and gradients we want our buttons to have. In this example we will be using different gradients of orange for our buttons.
CSS CODE:
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
Here we define a css class for the default, :hover and :active classes to get the desired effect when you hover over or click any button.
That’s it! We are done.
All we have to do now is include the ‘button’ and ‘orange’ classes for any button we want to display on our website.
Examples:
<a class=”button orange” href=”#”>Anchor</a>
<input class=”button orange” type=”button” value=”Input Button” />
<input class=”button orange” type=”submit” value=”Submit” />