In this tutorial we are going to make some cool css3 buttons.

Using CSS3 properties, there is a huge space of creativity for designing buttons; using border-radius for rounded corners, linear-gradient andbox-shadow for creating depth, transitions for the animations and more.

Features

  1. CSS3 Submit Buttons
  2. CSS3 Large Buttons
  3. CSS3 Small Buttons
  4. CSS3 Download Buttons
  5. CSS3 Call to Action Buttons
  6. CSS3 Double Decker Buttons

CSS3 Styles

<pre>input[type="button"], button {
border:0 none;
font:inherit;
}
*:focus{outline:0 none;}
input[type="submit"] {border:1px solid rgba(0, 0, 0, 0.25);}
input[type="button"], button {-moz-box-sizing: content-box;}/*fixes mozilla padding - mozilla only, doesn't need webkit or other values */
input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { padding:0;border:0 none; }/*fixes mozilla button padding - mozilla only, doesn't need webkit or other values */
.clearfix:after {
clear: both;
content: '.';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
/* General Button Styles, Cascades Down To Every Button ------------- */
.button {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.50);
background:#222222 url(images/button-overlay.png) repeat-x;
border:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
display:inline-block;
font-size:13px;
font-weight:bold;
line-height:1;
overflow:visible;
padding:5px 15px 6px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
text-align:center;
}
.button:hover {
background:#111111;
color:#FFFFFF;
}
.button:active {
background:#242424;
}

.green.button {
background-color:#91BD09;
}
.green.button:hover {
background-color:#749A02;
}
.green.button:active {
background-color:#a4d50b;
}
.blue.button {
background-color:#0E59AE;
}
.blue.button:hover {
background-color:#063468;
}
.blue.button:active {
background-color:#1169cc;
}
.purple.button {
background-color:#660099;
}
.purple.button:hover {
background-color:#330066;
}
.purple.button:active {
background-color:#7f02bd;
}
.breen.button {
background-color:#2DAEBF;
}
.breen.button:hover {
background-color:#007D9A;
}
.breen.button:active {
background-color:#36cbdf;
}
.red.button {
background-color:#CC0000;
}
.red.button:hover {
background-color:#990000;
}
.red.button:active {
background-color:#ea0202;
}
.magenta.button {
background-color:#A9014B;
}
.magenta.button:hover {
background-color:#630030;
}
.magenta.button:active {
background-color:#ce025c;
}
.orange.button {
background-color:#FF5C00;
}
.orange.button:hover {
background-color:#D45500;
}
.orange.button:active {
background-color:#fd762a;
}
.yellow.button {
background-color:#FFE115;
}
.yellow.button:hover {
background-color:#E4C913;
}
.yellow.button:active {
background-color:#fee539;
}
.white.button {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
color:#666666 !important;
font-weight:normal;
text-shadow:0 1px 1px #FFFFFF;
}
.white.button:hover {
background-color:#EEEEEE;
}
.white.button:active {
background-color:#ffffff;
}
.gray.button {
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50);
background:#FFFFFF url(images/button-overlay-black.png) repeat-x;
border:1px solid #BBBBBB;
color:#555555 !important;
text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);
}
.gray.button:hover {
background-color:#EEEEEE;
border-color:#999999;
color:#444444 !important;
}
.gray.button:active {
background-color:#ffffff;
}
/* Small Buttons -------------------------------------------------- */
.small.button {
font-size:11px;
padding:5px 15px 6px;
background-image:url(images/small-button-overlay.png);
}
input[type="submit"].small.button, .small.button.input {
padding:3px 15px 4px;
}
input[type="button"].small.button, button.small.button {
padding:4px 15px;
}

/* Large Buttons ------------------------------------------------- */
.large.button {
font-size:14px;
padding:8px 19px 9px;
background-image:url(images/large-button-overlay.png);
}
input[type="submit"].large.button, .large.button.input {
padding:6px 16px 6px;
}
input[type="button"].large.button, button.large.button {
padding:7px 16px;
}
/* Tall Buttons ------------------------------------------------- */
.tall.button {
font-size:14px;
padding:8px 19px 9px;
background-image:url(images/tall-button-overlay.png);
}
.tall.gray.button {
background-color:#FFFFFF;
background-image: url(images/tall-black.png);
background-repeat:repeat-x;
}
.tall.gray.button:hover {
background-color:#EEEEEE!important;
border-color:#999999;
color:#444444 !important;
}
.tall.gray.button:active {
background-color:#FFFFFF!important;
}
.tall.button em {
font-size:11.5px;
font-style:normal;
display:block;
margin-top:5px;
}
/* Round Buttons ------------------------------------------------ */
.round.button {
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
background-image:url(images/round-button-overlay.png);
border:1px solid rgba(0, 0, 0, 0.25);
font-size:13px;
padding:0;
}
.round.button span {
-moz-border-radius:14px;
-webkit-border-radius:14px;
border-radius:14px;
display:block;
line-height:1;
padding:4px 15px 6px;
}
.round.button.input {
padding:3px 13px 4px;
}
.small.round.button {
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
font-size:11px;
}
input[type="button"].round.small.button, button.round.small.button {
padding:0;
}
.small.round.button span {
-moz-border-radius:11px;
-webkit-border-radius:11px;
border-radius:11px;
padding:6px 15px 6px;
}
.large.round.button {
-moz-border-radius:18px;
-webkit-border-radius:18px;
border-radius:18px;
background-position:left bottom;
}
.large.round.button span {
-moz-border-radius:17px;
-webkit-border-radius:17px;
border-radius:17px;
font-size:14px;
padding:7px 20px 9px;
}
.large.tall.round.button small {
display:block;
margin-top:5px;
}

/* Arrows and Icons Classes --------------------------------------- */
.download.large.round span {
background:url(images/arrow-down.png) no-repeat right center;
padding-right:30px;
margin-right:15px;
}
.download.large span {
background:url(images/arrow-down.png) no-repeat right center;
padding-right:30px;
margin-right:0px;
}
.download.tall span {
background:url(images/arrow-down-tall.png) no-repeat right center;
float:right;
padding-right:40px;
margin:0 -5px -1px 0;
height:32px;
}
.download.light.tall span {
background:url(images/arrow-down-tall-light.png) no-repeat right center;
float:right;
padding-right:40px;
margin:0 -5px -1px 0;
height:32px;
}
.download.dark.tall span {
background:url(images/arrow-down-tall-reverse.png) no-repeat right center;
float:right;
padding-right:40px;
margin:0 -5px -1px 0;
height:32px;
}
.dlDark.large.round span {
background:url(images/arrow-down-dark.png) no-repeat right center;
padding-right:30px;
margin-right:15px;
}
.dlDark.large span {
background:url(images/arrow-down-dark.png) no-repeat right center;
padding-right:30px;
margin-right:0px;
}
.dlLight.large.round span {
background:url(images/arrow-down-light.png) no-repeat right center;
padding-right:30px;
margin-right:15px;
}
.dlLight.large span {
background:url(images/arrow-down-light.png) no-repeat right center;
padding-right:30px;
margin-right:0px;
}
</pre>

View Demo Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/02/Free_CSS3_Buttons1.pnghttp://w3lessons.info/wp-content/uploads/2012/02/Free_CSS3_Buttons1-150x150.pngKarthikeyan KCSS3FreebiesWeb DesignButton,Cascading Style Sheets,CSS3,freebies
In this tutorial we are going to make some cool css3 buttons. Using CSS3 properties, there is a huge space of creativity for designing buttons; using border-radius for rounded corners, linear-gradient andbox-shadow for creating depth, transitions for the animations and more.FeaturesCSS3 Submit Buttons CSS3 Large Buttons CSS3 Small Buttons CSS3 Download Buttons CSS3 Call to Action Buttons CSS3 Double Decker ButtonsCSS3...