Demo: CSS3 Buttons
CSS3 Gradient Buttons
by Web Designer Wall
Rectangle or Rounded Can be Medium or Small
Button Tag
Button Tag
H3
Gray Rounded Medium Small
Button Tag
Button Tag
H3
White Rounded Medium Small
Button Tag
Button Tag
H3
Orange Rounded Medium Small
Button Tag
Button Tag
H3
Red Rounded Medium Small
Button Tag
Button Tag
H3
Blue Rounded Medium Small
Button Tag
Button Tag
H3
Rosy Rounded Medium Small
Button Tag
Button Tag
H3
Green Rounded Medium Small
Button Tag
Button Tag
H3
Pink Rounded Medium Small
Button Tag
Button Tag
H3
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo: CSS3 Buttonstitle>
<style type="text/css">
body {
background: #ededed;
width: 900px;
margin: 30px auto;
color: #999;
}
p {
margin: 0 0 2em;
}
h1 {
margin: 0;
}
a {
color: #339;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div {
padding: 20px 0;
border-bottom: solid 1px #ccc;
}
/* button
---------------------------------------------- */
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.bigrounded {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.medium {
font-size: 12px;
padding: .4em 1.5em .42em;
}
.small {
font-size: 11px;
padding: .2em 1em .275em;
}
/* color styles
---------------------------------------------- */
/* black */
.black {
color: #d7d7d7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
/* gray */
.gray {
color: #e9e9e9;
border: solid 1px #555;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
background: #616161;
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
background: -moz-linear-gradient(top, #757575, #4b4b4b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
color: #afafaf;
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
background: -moz-linear-gradient(top, #575757, #888);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}
/* white */
.white {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}
/* orange */
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
/* red */
.red {
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
/* blue */
.blue {
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
/* rosy */
.rosy {
color: #fae7e9;
border: solid 1px #b73948;
background: #da5867;
background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
background: -moz-linear-gradient(top, #f16c7c, #bf404f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
background: #ba4b58;
background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
background: -moz-linear-gradient(top, #cf5d6a, #a53845);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
color: #dca4ab;
background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
background: -moz-linear-gradient(top, #bf404f, #f16c7c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}
/* green */
.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}
/* pink */
.pink {
color: #feeef5;
border: solid 1px #d2729e;
background: #f895c2;
background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
background: -moz-linear-gradient(top, #feb1d3, #f171ab);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
background: #d57ea5;
background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
color: #f3c3d9;
background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
background: -moz-linear-gradient(top, #f171ab, #feb1d3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}
style>
head>
<body>
<h1><a href="http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/">CSS3 Gradient Buttonsa>h1>
<p><em>byem> <a href="http://www.webdesignerwall.com">Web Designer Walla>p>
<div>
<a href="#" class="button black">Rectanglea> or
<a href="#" class="button black bigrounded">Roundeda> Can be
<a href="#" class="button black medium">Mediuma> or
<a href="#" class="button black small">Smalla>
<br /><br />
<input class="button black" type="button" value="Input Element" />
<button class="button black">Button Tagbutton>
<span class="button black">Spanspan>
<div class="button black">Divdiv>
<p class="button black">P Tagp>
<h3 class="button black">H3h3>
div>
<div>
<a href="#" class="button gray">Graya>
<a href="#" class="button gray bigrounded">Roundeda>
<a href="#" class="button gray medium">Mediuma>
<a href="#" class="button gray small">Smalla>
<br /><br />
<input class="button gray" type="button" value="Input Element" />
<button class="button gray">Button Tagbutton>
<span class="button gray">Spanspan>
<div class="button gray">Divdiv>
<p class="button gray">P Tagp>
<h3 class="button gray">H3h3>
div>
<div>
<a href="#" class="button white">Whitea>
<a href="#" class="button white bigrounded">Roundeda>
<a href="#" class="button white medium">Mediuma>
<a href="#" class="button white small">Smalla>
<br /><br />
<input class="button white" type="button" value="Input Element" />
<button class="button white">Button Tagbutton>
<span class="button white">Spanspan>
<div class="button white">Divdiv>
<p class="button white">P Tagp>
<h3 class="button white">H3h3>
div>
<div>
<a href="#" class="button orange">Orangea>
<a href="#" class="button orange bigrounded">Roundeda>
<a href="#" class="button orange medium">Mediuma>
<a href="#" class="button orange small">Smalla>
<br /><br />
<input class="button orange" type="button" value="Input Element" />
<button class="button orange">Button Tagbutton>
<span class="button orange">Spanspan>
<div class="button orange">Divdiv>
<p class="button orange">P Tagp>
<h3 class="button orange">H3h3>
div>
<div>
<a href="#" class="button red">Reda>
<a href="#" class="button red bigrounded">Roundeda>
<a href="#" class="button red medium">Mediuma>
<a href="#" class="button red small">Smalla>
<br /><br />
<input class="button red" type="button" value="Input Element" />
<button class="button red">Button Tagbutton>
<span class="button red">Spanspan>
<div class="button red">Divdiv>
<p class="button red">P Tagp>
<h3 class="button red">H3h3>
div>
<div>
<a href="#" class="button blue">Bluea>
<a href="#" class="button blue bigrounded">Roundeda>
<a href="#" class="button blue medium">Mediuma>
<a href="#" class="button blue small">Smalla>
<br /><br />
<input class="button blue" type="button" value="Input Element" />
<button class="button blue">Button Tagbutton>
<span class="button blue">Spanspan>
<div class="button blue">Divdiv>
<p class="button blue">P Tagp>
<h3 class="button blue">H3h3>
div>
<div>
<a href="#" class="button rosy">Rosya>
<a href="#" class="button rosy bigrounded">Roundeda>
<a href="#" class="button rosy medium">Mediuma>
<a href="#" class="button rosy small">Smalla>
<br /><br />
<input class="button rosy" type="button" value="Input Element" />
<button class="button rosy">Button Tagbutton>
<span class="button rosy">Spanspan>
<div class="button rosy">Divdiv>
<p class="button rosy">P Tagp>
<h3 class="button rosy">H3h3>
div>
<div>
<a href="#" class="button green">Greena>
<a href="#" class="button green bigrounded">Roundeda>
<a href="#" class="button green medium">Mediuma>
<a href="#" class="button green small">Smalla>
<br /><br />
<input class="button green" type="button" value="Input Element" />
<button class="button green">Button Tagbutton>
<span class="button green">Spanspan>
<div class="button green">Divdiv>
<p class="button green">P Tagp>
<h3 class="button green">H3h3>
div>
<div>
<a href="#" class="button pink">Pinka>
<a href="#" class="button pink bigrounded">Roundeda>
<a href="#" class="button pink medium">Mediuma>
<a href="#" class="button pink small">Smalla>
<br /><br />
<input class="button pink" type="button" value="Input Element" />
<button class="button pink">Button Tagbutton>
<span class="button pink">Spanspan>
<div class="button pink">Divdiv>
<p class="button pink">P Tagp>
<h3 class="button pink">H3h3>
div>
body>
html>