Images are one of the things that can slow a web page down, and many websites have lots and lots of images in their navigation and for forms and calls to action. However, these days it isn’t necessary to use an image for your buttons. CSS3 makes it easy to create attractive buttons that take up much less space than their equivalent image buttons would use.
Step 1: Create Your Button in the HTML
This is the easy part. You can create a button with any block-level HTML element, but because I’m creating buttons, I am going to use the BUTTON element:
<button>Click Me »</button>
Step 2: Create the Basic CSS
If I’m planning on having multiple buttons on a page, I like to think about the styles that I want to keep consistent, things like the dimensions, borders, and basic colors.
For the most basic button, I wanted it black and white and 150px wide, with no border, rounded corners and a simple drop shadow that inset when the button was clicked. The CSS looks like this:
button {
width: 150px;
padding: 10px;
background-color: #fff;
color: #000;
border: none;
text-decoration: none;
font-weight: bold;
-webkit-box-shadow: 2px 2px 2px 1px rgba(50, 50, 50, 0.5);
box-shadow: 2px 2px 2px 1px rgba(50, 50, 50, 0.5);
-webkit-border-radius: 5px;
border-radius: 5px;
}
button:active {
-webkit-box-shadow: inset 2px 2px 2px 1px rgba(50, 50, 50, 0.5);
box-shadow: inset 2px 2px 2px 1px rgba(50, 50, 50, 0.5);
}
You can see what it looks like in the image above, or try it out here.
Step 3: Give the Basic Button a Gradient
Your best tool for creating interesting buttons is CSS3 gradients. Just giving a basic button a slight gradient will make it look more professional. For the second button above, I just added a thin black border and a simple grey and white gradient. The CSS looks like this:
.simple {
border: solid thin black;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(223,223,223,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(223,223,223,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(223,223,223,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00dfdfdf',GradientType=0 );
}
.simple:active {
background: -moz-linear-gradient(top, rgba(223,223,223,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(223,223,223,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(223,223,223,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(223,223,223,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(223,223,223,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(223,223,223,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#00ffffff',GradientType=0 );
}
Because I’m setting the styles with a class (.simple) I need to add that class to my BUTTON element:
<button class="simple">Click Me »</button>
You can try out this button here.
