1. First
just create a normal button (here I am taking an 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 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
5. Set
border style for rounded corners 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');
-
- -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5384BE', endColorstr='#4386D7');
-
- background: -webkit-gradient(linear, left top, left bottom, from(#5384BE), to(#4386D7));
-
- background: -moz-linear-gradient(top, #5384BE, #4386D7);
-
- background: -o-linear-gradient(top, #5384BE, #4386D7);
-
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');
-
- -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #85B6F0',
- endColorstr='#579AEB');
-
- background: -webkit-gradient(linear, left top, left bottom, from(#85B6F0),
- to(#579AEB));
-
- background: -moz-linear-gradient(top, #85B6F0, #579AEB);
-
- background: -o-linear-gradient(top, #85B6F0, #579AEB);
-
- }
The output will be
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.