These days creating buttons using CSS is one of the best web design techniques around. There are many examples and tutorials available on the internet. At present, designers are eliminating background images from buttons and using CSS for creating beautiful buttons. In this article, you'll learn how to create five beautiful CSS based buttons that you can use where ever you want. Now let's design our CSS based buttons.
1. BoxCuttor Button
First put this HTML code in your body tag:
<body>
<form id="form1" runat="server">
<div>
<a href="#" class="csharp">C# Sharp</a><br />
</div>
</form>
</body>
Now put some CSS in a style sheet:
csharp {
1. Put some Shadow:
-moz-box-shadow: inset 0px 0px 0px 0px #f9eca0;
-webkit-box-shadow: inset 0px 0px 0px 0px #f9eca0;
box-shadow: inset 0px 0px 0px 0px #f9eca0;
2. Now provide some background effect:
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e) );
background: -moz-linear-gradient( center top, #f0c911 5%, #f2ab1e 100% );
background-color: #f0c911;
3. Provide some border radius in all sides:
-webkit-border-top-left-radius: 42px;
-moz-border-radius-topleft: 42px;
border-top-left-radius: 42px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 42px;
-moz-border-radius-bottomright: 42px;
border-bottom-right-radius: 42px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
4. Some simple CSS code:
text-indent: 0px;
border: 3px solid #e65f44;
display: inline-block;
color: #c92200;
font-family: Arial;
font-size: 18px;
font-weight: bold;
font-style: normal;
height: 59px;
line-height: 59px;
width: 133px;
text-decoration: none;
text-align: center;
text-shadow: 0px 0px 0px #ded17c;
}
5. Now give some hover effect for our buttons:
.csharp:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1, #f0c911) );
background: -moz-linear-gradient( center top, #f2ab1e 5%, #f0c911 100% );
background-color: #f2ab1e;
}
6. Finally, give some effect for when the button is active:
.csharp:active {
position: relative;
top: 1px;
}
Output:
![1.PNG]()
2. Button With Icon
HTML Code
First put this HTML code in your body tag:
<div>
<a class="button2 iconImg call" href="#"><span>Call Now!</span></a><br /><br />
</div>
CSS Code
In this portion of code, we create our basic button design without any effect:
a.button2 {
border: 1px solid #fff;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 5px rgba(1, 1, 1, 0.5);
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-decoration: none;
padding: 5px 15px;
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffffff),color-stop(1, #dbdbdb));
text-shadow: #fef 0 1px 0;
float: left;
margin-bottom: 15px;
margin-right: 15px;
color: #497390;
display: block;
line-height: 24px;
font-weight: bold;
font-size: 20px;
}
Now it's time to give some "hover" and "active" effect for our button:
a.button2:hover {
color: #111;
display: block;
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffffff),color-stop(1, #eeeeee));
}
a.button2:active {
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #dbdbdb),color-stop(1, #ffffff));
}
Now, we need an icon corresponding to our button's requirements, like here we have a call button, so now we use a call icon and use that image in our CSS:
a.button2 {
border: 1px solid #979797;
}
a.button2.iconImg {
padding-left: 11px;
}
a.button2.iconImg span {
padding-left: 36px;
background: url(icon1.png) no-repeat 0 5px;
}
a.button2.iconImg.call span {
background-position: 0px -3px;
}
Now our Call Button is ready to use.
Output:
![2.PNG]()
3. Tabulate Button:
First, we need our HTML Code:
<div>
<a href="#" class="button1">Click Me !!</a>
</div>
CSS Code:
.button1 {
1. Put some Shadow:
-moz-box-shadow: inset 0px 0px 50px -14px #fff6af;
-webkit-box-shadow: inset 0px 0px 50px -14px #fff6af;
box-shadow: inset 0px 0px 50px -14px #fff6af;
2. Now give some background effect:
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffe066), color-stop(1, #ffab23) );
background: -moz-linear-gradient( center top, #ffe066 5%, #ffab23 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe066', endColorstr='#ffab23');
background-color: #ffe066;
3. Provide some border radius for all sides:
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
4. Some simple CSS code:
text-indent: 2.58px;
border: 5px solid #b50909;
display: inline-block;
color: #333333;
font-family: Comic Sans MS;
font-size: 17px;
font-weight: bold;
font-style: normal;
height: 53px;
line-height: 53px;
width: 106px;
text-decoration: none;
text-align: center;
text-shadow: 1px 2px 1px #ffee66;
}
5. Now give some hover effect for our button:
.button1:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffe066) );
background: -moz-linear-gradient( center top, #ffab23 5%, #ffe066 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffe066');
background-color: #ffab23;
}
6. Finally, give some effect when the button is active:
.button1:active {
position: relative;
top: 1px;
}
Output:
![3.PNG]()
4. Stylish Blue
HTML Code:
<div>
<a href="#" class="css_btn_class">Submit</a>
</div>
CSS Code:
In this button we used simple CSS with some "gradient" effect therefore our button is looking more beautiful than before.
1. Provide some simple CSS:
.css_btn_class {
font-size: 22px;
font-family: Arial Black;
font-weight: normal;
-moz-border-radius: 42px;
-webkit-border-radius: 42px;
border-radius: 42px;
border: 5px solid #82b9f0;
padding: 8px 19px;
text-decoration: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #8abbeb), color-stop(100%, #2f88e0) );
background: -moz-linear-gradient( center top, #8abbeb 5%, #2f88e0 100% );
background: -ms-linear-gradient( top, #8abbeb 5%, #2f88e0 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8abbeb', endColorstr='#2f88e0');
background-color: #8abbeb;
color: #ffffff;
display: inline-block;
text-shadow: 0px -3px 0px #5691cc;
-webkit-box-shadow: -1px -6px 20px 9px #c5e0fa;
-moz-box-shadow: -1px -6px 20px 9px #c5e0fa;
box-shadow: -1px -6px 20px 9px #c5e0fa;
}
2. Now give some hover effect:
.css_btn_class:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #2f88e0), color-stop(100%, #8abbeb) );
background: -moz-linear-gradient( center top, #2f88e0 5%, #8abbeb 100% );
background: -ms-linear-gradient( top, #2f88e0 5%, #8abbeb 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f88e0', endColorstr='#8abbeb');
background-color: #2f88e0;
}
.css_btn_class:active {
position: relative;
top: 1px;
}
Output:
![4.PNG]()