10 Ways To Create Buttons With CSS


Create CSS-ButtonsDid 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:

CSS button example

 

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:

CSS button

CSS button

.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:

CSS button

CSS button

.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:

CSS button

/*---------------- 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:

CSS button

/*-------------- 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:

CSS buttons

/*------------- 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:

Buttons with CSS

/*-------------- 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:

Buttons with CSS

/*------------- 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:

Buttons with CSS

/*------------ 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:

Buttons with CSS

/*---------- 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:

Buttons with CSS

/*----------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;
}

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

1 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Do you have any text size button ? i just want to put icon before my link. Like your author name. Here is my blog http://photoshopph.blogspot.com/

    ReplyDelete