Post
Ask Question

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

1. First just create a normal button (here I am taking an HTML button) without any style.
  1. <input type="button" value="My Button"/> 
The output will be
pic-1.PNG
2. Now define the basic style like font type, font color in CSS by creating a CSS class named button
  1. <style type="text/css">  
  2. .button {  
  3.      font-size: 11px;  
  4.      font-weight: bold;  
  5.      font-family: Arial;  
  6.      color: #ffffff;  
  7. }  
  8. </style> 
3. Set the CSS class for this button
  1. <input type="button" value="My Button" class="button"/> 
The output will be
 
pic-2.png
 
4. Define more style like width, height, cursor, padding, outline, text-align etc.
  1. min-width: 54px;  
  2. height: 24px;  
  3. white-space: nowrap;  
  4. cursor: pointer;  
  5. outline: 0 none;  
  6. padding: 0 10px 2px;  
  7. text-align: center; 
Explanation: 
 
Property Name
Description
min-width
Set the minimum width of the button
white-space
Specify that the text of the 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
 
pic-3.png
 
5. Set border style for rounded corners and color. The border-radius is used
  1. border-radius: 2px 2px 2px 2px;  
  2. 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
 
pic-4.png
 
6. Set the gradient background style for the button
  1. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5384BE', endColorstr='#4386D7');  
  2. /* for IE */  
  3. -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5384BE', endColorstr='#4386D7');  
  4. /* for IE 8 and above */  
  5. background: -webkit-gradient(linear, left top, left bottom, from(#5384BE), to(#4386D7));  
  6. /* for webkit browsers */  
  7. background: -moz-linear-gradient(top, #5384BE, #4386D7);  
  8. /* for firefox 3.6+ */  
  9. background: -o-linear-gradient(top, #5384BE, #4386D7);  
  10. /* for Opera */ 
The output will be
 
pic-5.png
 
7. Set mouseover style by creating one more CSS class
  1. .button:hover {  
  2.      cursor: pointer;  
  3.      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #85B6F0',  
  4.           endColorstr='#579AEB');  
  5.      /* for IE */  
  6.      -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #85B6F0',  
  7.           endColorstr='#579AEB');  
  8.      /* for IE 8 and above */  
  9.      background: -webkit-gradient(linear, left top, left bottom, from(#85B6F0),  
  10.           to(#579AEB));  
  11.      /* for webkit browsers */  
  12.      background: -moz-linear-gradient(top, #85B6F0, #579AEB);  
  13.      /* for firefox 3.6+ */  
  14.      background: -o-linear-gradient(top, #85B6F0, #579AEB);  
  15.      /* for Opera */  
  16. } 
The output will be
 
pic-6.png
 
You can set more style depending on your need. It is not the only gradient, but you can set normal background color also, shadow button also. The whole idea of this article to explain how you can create a stylish button without using any image.