How To Create CSS Buttons With Gradient Color (Imageless)

CSS button with gradient

At this time I want to write a simple tutorial how to create CSS buttons as we can find on so many website on the internet. It's like Google buttons. Imageless, it's written using CSS without need any images for gradation. CSS buttons will be loaded faster than image buttons. So it will increase page speed loading of your website.

We will create following buttons.


In this tutorial I will create in four different colors: blue, orange, red and grey. Here we go.

First you need to create CSS file, or you can also create it in your HTML file. In this tutorial, I write CSS rules in HTML file.

Create a class called blueButton, write these on CSS rules:

.blueButton {
background-color: #4d90fe;
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ed;
color: #fff;
font-weight: bold;
font-size: 11px
font-family:  Arial, Tahoma, Verdana;
padding: 6px 8px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px; 
border-radius: 2px; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* IE 8 */
filter: alpha(opacity=90);  /* IE 5-7 */
-moz-opacity: 0.9;  /* Netscape */
-khtml-opacity: 0.9;  /* Safari 1.x */
opacity: 0.9;  /* Good browsers */
outline: none;
cursor: pointer;
}

.blueButton:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
filter: alpha(opacity=100);  /* IE 5-7 */
-moz-opacity: 1;  /* Netscape */
-khtml-opacity: 1;  /* Safari 1.x */
opacity: 1;  /* Good browsers */
}

.blueButton:active {
-moz-box-shadow:    inset 0 1px 2px #444;
-webkit-box-shadow: inset 0 1px 2px #444;
box-shadow:         inset 0 1px 2px #444;
}

Here the explanation:
On class .blueButton, you can see background-color: #4d90fe. This color will not appears except user open the page using web browser that doesn't support gradient.

How about background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed)? This is CSS rules for gradient. It's written in 5 rows for cross browser compatibility reason. There's difference  of interpretation between Chrome, Firefox, Internet Explorer, Opera and Safari.

color: #fff for font color of the button.

font-weight: bold  to make font bold on the button.

padding: 6px 8px: Padding is a rule for make space between content and border. Bigger padding will make bigger object.

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
Rules above are for corner radius of the button. It makes rounded rectangle. Written in 3 lines for cross browser compatibility reason.

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* IE 8 */
filter: alpha(opacity=90);  /* IE 5-7 */
-moz-opacity: 0.9;  /* Netscape */
-khtml-opacity: 0.9;  /* Safari 1.x */
opacity: 0.9;  /* Good browsers */
Rules above are for opacity of the button.

outline: none;
It will remove default outline.

cursor: pointer;
It will set cursor to pointer (hand cursor once mouse over links).

.blueButton:hover
It's css rule for condition when mouse over the button.

.blueButton:active
It's a condition when user click the button.

You can download html file here. (CSS rules inside HTML file)

I hope this CSS button tutorial useful for you are designing web.