How to customize HTML/ASP.NET button style using CSS?

In this article I will show you how you can design a normal HTML/ASP.NET button to stylish button using CSS.

 

1.       First just create a normal button (here I am taking a HTML button) without any style.

<input type="button" value="My Button"/>

 

The output will be

2.       Now define the basic style like font type, font color in CSS by creating a CSS class named button

<style type="text/css">

        .button {

            font-size: 11px;

            font-weight: bold;

            font-family:  Arial;

            color: #ffffff;

        }

    </style>

 

3.       Set the CSS class for this button

<input type="button" value="My Button" class="button"/>

 

The output will be

4.       Define more style like width, height, cursor, padding, outline, text-align etc.

min-width: 54px;

       height: 24px; 

       white-space: nowrap;   

       cursor: pointer;  

       outline: 0 none;

       padding: 0 10px 2px;

       text-align: center;

 Explanation: 

Property Name	Description
min-width	Set the minimum width of button
white-space	Specify that the text of button will never wrap
outline	Set the outline style of the button
padding	Set the top, left, right and bottom padding value

The output will be

5.       Set border style for rounded corner and color. The border-radius is used

border-radius: 2px 2px 2px 2px;

       border: 1px solid #4980C1; 

Explanation: 

Property Name	Description
Border-radius	Add rounded borders to the button. The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.

The output will be

6.       Set the gradient background style for the button

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5384BE', endColorstr='#4386D7'); /* for IE */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5384BE', endColorstr='#4386D7'); /* for IE 8 and above */

background: -webkit-gradient(linear, left top, left bottom, from(#5384BE), to(#4386D7)); /* for webkit browsers */

    background: -moz-linear-gradient(top, #5384BE, #4386D7); /* for firefox 3.6+ */

    background: -o-linear-gradient(top, #5384BE, #4386D7); /* for Opera */

 

The output will be

7.       Set mouseover style by creating one more CSS class

.button:hover

{

    cursor: pointer;    

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #85B6F0',

 endColorstr='#579AEB'); /* for IE */

    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #85B6F0',

    endColorstr='#579AEB'); /* for IE 8 and above */

    background: -webkit-gradient(linear, left top, left bottom, from(#85B6F0),

    to(#579AEB)); /* for webkit browsers */

    background: -moz-linear-gradient(top, #85B6F0, #579AEB); /* for firefox 3.6+ */

    background: -o-linear-gradient(top, #85B6F0, #579AEB); /* for Opera */

}

 

The output will be

 

You can set more style depending on your need. It is not only gradient, you can set normal background color also, shadow button also. The whole idea of this article to explain how you can create stylish button without using any image.