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
![pic-1.PNG]()
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
![pic-2.png]()
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
![pic-3.png]()
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
![pic-4.png]()
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
![pic-5.png]()
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
![pic-6.png]()
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.