Pretty CSS3 Button Collection
Here’s a nice collection of 3 sets of pretty CSS3 buttons.
The buttons make use of some of the amazing features in CSS3, such as border radius, text shadow, box shadow etc.
Using the buttons is extremely easy, simply add the class ‘button’ to a link or button. This link or button can then be customized with a size and color.
Available colors are ( green, blue, red , orange & purple )
Available sizes ( small, medium, large )
So if you wanted to create a large red button from a link you would simply write :
<a class="button red large" href="#">Click Here</a>
Below is the CSS for each image set and a small preview image.
.button {
color : #FFF;
display: block;
text-shadow: -1px -1px 1px #000000;
filter: dropshadow(color=#000000, offx=-1, offy=-1);
-webkit-box-shadow: inset 0px -2px 2px #666;
-moz-box-shadow: inset 0px -2px 2px #666;
box-shadow: inset 0px -2px 2px #666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 5px;
border: solid 1px #666;
}
.button:hover {
border: solid 1px #333;
}
.button:active {
-webkit-box-shadow: inset 0px -1px 1px #666;
-moz-box-shadow: inset 0px -1px 1px #666;
box-shadow: inset 0px -1px 1px #666;
}
.large {
height: 75px;
width: 200px;
line-height: 75px;
text-align: center;
font-size: 36px;
text-decoration: none;
}
.medium {
height: 50px;
width: 135px;
line-height: 50px;
text-align: center;
font-size: 28px;
text-decoration: none;
}
.small {
height: 30px;
width: 100px;
line-height: 30px;
text-align: center;
font-size: 18px;
text-decoration: none;
}
.blue {
background: #b8e1fc;
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* ie */
}
.green {
background: #9dd53a;
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* ie */
}
.red {
background: #f85032; /* old browsers */
background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* ie */
}
.orange {
background: #fceabb; /* old browsers */
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* ie */
}
.purple {
background: #cb60b3; /* old browsers */
background: -moz-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#c146a1), color-stop(51%,#a80077), color-stop(100%,#db36a4)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0 ); /* ie */
}
.button {
color : #FFF;
display: block;
text-shadow: -1px -1px 1px #000000;
filter: dropshadow(color=#000000, offx=-1, offy=-1);
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
margin: 5px;
-webkit-box-shadow: 0px 1px 1px #333333;
-moz-box-shadow: 0px 1px 1px #333333;
box-shadow: 0px 1px 1px #333333;
border: 1px solid #FFF;
}
.button:hover {
-webkit-box-shadow: 0px 1px 1px #eee;
-moz-box-shadow: 0px 1px 1px #eee;
box-shadow: 0px 1px 1px #eee;
}
.large {
height: 75px;
width: 200px;
line-height: 75px;
text-align: center;
font-size: 36px;
text-decoration: none;
}
.medium {
height: 50px;
width: 135px;
line-height: 50px;
text-align: center;
font-size: 28px;
text-decoration: none;
}
.small {
height: 30px;
width: 100px;
line-height: 30px;
text-align: center;
font-size: 18px;
text-decoration: none;
}
.blue {
background: #7abcff; /* old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* ie */
}
.green {
background: #8fc800; /* old browsers */
background: -moz-linear-gradient(top, #8fc800 0%, #8fc800 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fc800), color-stop(100%,#8fc800)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#8fc800',GradientType=0 ); /* ie */
}
.red {
background: #ff3019; /* old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* ie */
}
.orange {
background: #ffaf4b; /* old browsers */
background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf4b), color-stop(100%,#ff920a)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* ie */
}
.purple {
background: #ff5db1; /* old browsers */
background: -moz-linear-gradient(top, #ff5db1 0%, #ef017c 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5db1), color-stop(100%,#ef017c)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* ie */
}
.button {
color : #FFF;
display: block;
text-shadow: -1px -1px 1px #000000;
filter: dropshadow(color=#000000, offx=-1, offy=-1);
-webkit-box-shadow: 0px 2px 2px #000000;
-moz-box-shadow: 0px 2px 2px #000000;
box-shadow: 0px 2px 2px #000000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 5px;
}
.button:hover {
-webkit-box-shadow: 0px 2px 2px #333;
-moz-box-shadow: 0px 2px 2px #333;
box-shadow: 0px 2px 2px #333;
}
.button:active {
-webkit-box-shadow: 0px 1px 3px #333;
-moz-box-shadow: 0px 1px 3px #333;
box-shadow: 0px 1px 3px #333;
}
.large {
height: 75px;
width: 200px;
line-height: 75px;
text-align: center;
font-size: 36px;
text-decoration: none;
}
.medium {
height: 50px;
width: 135px;
line-height: 50px;
text-align: center;
font-size: 28px;
text-decoration: none;
}
.small {
height: 30px;
width: 100px;
line-height: 30px;
text-align: center;
font-size: 18px;
text-decoration: none;
}
.blue {
background: #7abcff; /* old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* ie */
}
.green {
background: #8fc800; /* old browsers */
background: -moz-linear-gradient(top, #8fc800 0%, #8fc800 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fc800), color-stop(100%,#8fc800)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#8fc800',GradientType=0 ); /* ie */
}
.red {
background: #ff3019; /* old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* ie */
}
.orange {
background: #ffaf4b; /* old browsers */
background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf4b), color-stop(100%,#ff920a)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* ie */
}
.purple {
background: #ff5db1; /* old browsers */
background: -moz-linear-gradient(top, #ff5db1 0%, #ef017c 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5db1), color-stop(100%,#ef017c)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* ie */
}
This entry was posted on Sunday, July 26th, 2015 at 7:08 pm and is filed under CSS, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. You can leave a response, or trackback from your own site.
