10 Ways To Create Buttons With CSS

Did you ever wonder how come some sites use fancy buttons yet they load fast and are compatible with all browsers? The answer is that they u...

Did you ever wonder how come some sites use fancy buttons yet they load fast and are compatible with all browsers? The answer is that they use custom Buttons created and designed with pure CSS Code without using a single image. This way they create buttons out of code that are efficient and more useful when it comes to speeding up web load time. In the tutorial today I will share the same buttons we created for Read more links and will see how can we use them to create beautiful web buttons which can be used to convert any link or text you want into a button. Interesting? Lets now Create one for your website.

Live Demo

PS: The first two are not added to demo. So you can see the screenshots for active and mouse hover mode.

How To Create CSS Buttons?

To create a button with CSS alone and not using any image graphics then enclose your link with the following HTML Code:

<span class="MBT-Buttons"><a href="#">TEXT LINK</a></span>

You just need to replace # with the link URL and MBT-Buttons with the link text.  For example if I want to link my blog using a button I will do this,

<span class="MBT-Buttons"><a href="http://www.MyBloggerTricks.com">My Blogger Tricks</a></span>

and the output would be:

 

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 Color Generator Tool 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 social network links, read more blog links,  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;
}