Die Defintion des Buttons
.css3button1 {
display: inline-block;
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);
}
.css3button1:hover { text-decoration: none;}
.css3button1:active { position: relative; top: 1px;}
und die Farbangaben extra ;)
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
/* Fallback für nicht CSS3 Browser */
background: #C89675;
/* Angabe für Webkit Browser */
background: -webkit-gradient(linear, left top, left bottom, from(#C89675), to(#c87137));
/* Angabe für Mozilla Browser */
background: -moz-linear-gradient(top, #C89675, #c87137);
/* Angabe für Internet Explorer */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C89675', endColorstr='#c87137');
}
.orange:hover {
color: #fef4e9;
background: #E9833F;
background: -webkit-gradient(linear, left top, left bottom, from(#E9833F), to(#AC612F));
background: -moz-linear-gradient(top, #E9833F, #AC612F);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E9833F', endColorstr='#AC612F');
}
.orange:active {
color: #fef4e9;
background: -webkit-gradient(linear, left top, left bottom, from(#c87137), to(#C89675));
background: -moz-linear-gradient(top, #c87137, #C89675);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c87137', endColorstr='#C89675');
}
und so kann man diese Definitionen dann benutzen
<a class="css3button1 orange" href="css3-buttons.html">Button</a>
Das Ergebnis gibt es hier: Button