10 Ways To Create Buttons With CSS

 

Customize The Button Styles

To change the look and feel of the buttons below then kindly make these changes:

• Edit .MBT-Buttons To Change background, border and font colors in Active mode
• Edit .MBT-Buttons:hover To Change background, border and font colors when a user hovers mouse cursor on the button
• Edit .MBT-Buttons a To change the link color 
• Edit .MBT-Buttons a:hover To change the link color on mouse hover

You can use the [a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html"]Color Generator Tool[/a] For changing colors.  For any help if needed just post your query in the comments box. It would be no less than a pleasure to help you along.

CSS Code For Buttons

You can use the CSS buttons below for turning [a href="http://www.mybloggertricks.com/2009/08/releasing-gorgeous-mbt-social-media.html" target="_blank"]social network[/a] links, [a href="http://www.mybloggertricks.com/2009/09/attractive-read-more-button-images-for.html" target="_blank"]read more blog links[/a],  RSS links, Profile Links, any link you want into a Button. Have Fun! :>

Button#1:

.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#E22400;
margin:5px 0;
float:left;
border:3px solid #E22400;

padding:5px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#E22400;
font:bold 11px sans-serif;
color:#ffffff;
}

.MBT-Buttons a {
color:#E22400;
text-decoration:none;
}

.MBT-Buttons a:hover { 
text-decoration:none;
color:#fff;
}

Button#2:

.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#25448B;
margin:5px 0;
float:left;
border-bottom:3px solid #25448B;
border-top:3px solid #25448B;

padding:5px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
border-bottom:3px dotted #25448B;
border-top:3px dotted #25448B;
}

.MBT-Buttons a {
color:#25448B;
text-decoration:none;
}

.MBT-Buttons a:hover { 
text-decoration:none;
}

 

Button#3:

/*---------------- Rectangle left border-----------*/
.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;

border-right:2px solid #009999;
border-left:10px solid #009999;
border-bottom:2px solid #009999;
border-top:2px solid #009999;

padding:5px;
font:bold 11px sans-serif;
}
.MBT-Buttons :hover{
background:#fff;
font:bold 11px sans-serif;
color:#006B6B;

border-right:2px dotted #009999;
border-left:10px solid #006B6B;
border-bottom:2px dotted #009999;
border-top:2px dotted #009999;
}

.MBT-Buttons a {
color:#009999;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#009999;
text-decoration:none;
}

Button#4:

/*-------------- Pink Left right -----------*/
.MBT-Buttons {
background:#fff;
text-align:right;
cursor:pointer;
color:#FE80DF;
margin:5px 0;
float:right;
border-right:2px solid #FE80DF;
border-left:2px solid #FE80DF;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
color:#CC0099;
border-right:2px solid #CC0099;
border-left:2px solid #CC0099;
}
.MBT-Buttons a {
color:#FE80DF;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#CC0099;
text-decoration:none;
}

Button#5:

/*------------- Brown top Bottom----------*/
.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#B26B00;
margin:5px 0;
float:right;
border-top:2px solid #ddd;
border-bottom:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
color:#B26B00;
border-top:2px solid #B26B00;
border-bottom:2px solid #B26B00;
}
.MBT-Buttons a {
color:#B26B00;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#B26B00;
text-decoration:none;
}

Button#6:

/*-------------- Blue Blank-----------------*/

.MBT-Buttons{
background:#0080ff;
text-align:right;
cursor:pointer;
color:#Fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#FFf;
font:bold 11px sans-serif;
color:#0080ff;
border:3px dotted #ddd;
}
.MBT-Buttons a {
color:#fff;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#0080ff;
text-decoration:none;
}

Button#7:

/*------------- Red + Dark Red------------*/

.MBT-Buttons{
background:#fffff;
text-align:right;
cursor:pointer;
color:#FE8080;
margin:5px 0;
float:right;
border:2px solid #FE8080;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#FFf;
font:bold 12px sans-serif;
color:#FF0000;
border:2px solid #FF0000;
}
.MBT-Buttons a {
color:#FE8080;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#FF0000;
text-decoration:none;
}

Button#8:

/*------------ White + Green -----------*/

.MBT-Buttons{
background:#fffff;
text-align:right;
cursor:pointer;
color:#008000;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#008000;
font:bold 11px sans-serif;
color:#fff;
border:2px solid #ddd;
}
.MBT-Buttons a {
color:#008000;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#fff;
text-decoration:none;
}

Button#9:

/*---------- Black --------------*/
.MBT-Buttons{
background:#000800;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
color:#000800;
border:2px solid #000800;
}
.MBT-Buttons a {
color:#fff;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#000800;
text-decoration:none;
}

Button#10:

/*----------Orange One 1 ----------------*/

.MBT-Buttons {
background:#EB7F17;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:none;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#FFB93C;
}
.MBT-Buttons a {
color:#fff;
text-decoration:none;
}

.MBT-Buttons a:hover {
color:#fff;
text-decoration:none;
}

Source: http://www.mybloggertricks.com/2011/07/10-ways-to-create-buttons-with-css.html