[CSS3] elegant css3 button

Hello, nggak kerasa sekarang saya telah membuat blog kesekian setelah blog - blog sebelumnya yang gagal. kali ini saya akan membagikan beberapa koleksi elegant css3 button hasil utak atik sendiri. button di bawah mungkin akan terlihat kurang sempurna di beberapa browser lama. langsung saja berikut adalah kode untuk elegant css3 button


1. Red Button

<button class="red button">This is red Button</button>
<style>
.button {
border: 0px;
padding: 5px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666;
font-weight: 900;
}
.button:active {
color: #fff;
box-shadow: none;
}
.red
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='darkred', endColorstr='red');
background-image: -webkit-gradient(linear, left top, left bottom, from(darkred), to(red));
background-image: -moz-linear-gradient(top, darkred, red);
background-image: -o-linear-gradient(top, darkred, red);
background-image: -ms-linear-gradient(top, darkred, red);
color: rgba(255,255,255,0.6);
}
</style>

2. Blue Button

<button class="blue button">This is blue Button</button>
<style>
.button {
border: 0px;
padding: 5px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666;
font-weight: 900;
}
.button:active {
color: #fff;
box-shadow: none;
}
.blue
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='darkblue', endColorstr='blue');
background-image: -webkit-gradient(linear, left top, left bottom, from(darkblue), to(blue));
background-image: -moz-linear-gradient(top, darkblue, blue);
background-image: -o-linear-gradient(top, darkblue, blue);
background-image: -ms-linear-gradient(top, darkblue, blue);
color: rgba(255,255,255,0.6);
}
</style>

3. Yellow Button

<button class="yellow button">This is yellow Button</button>
<style>
.button {
border: 0px;
padding: 5px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666;
font-weight: 900;
}
.button:active {
color: #fff;
box-shadow: none;
}
.yellow
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='chocolate');
background-image: -webkit-gradient(linear, left top, left bottom, from(orange), to(chocolate));
background-image: -moz-linear-gradient(top, orange, chocolate);
background-image: -o-linear-gradient(top, orange, chocolate);
background-image: -ms-linear-gradient(top, orange, chocolate);
color: rgba(0,0,0,0.6);
}
</style>

4. Green Button

<button class="green button">This is green Button</button>
<style>
.button {
border: 0px;
padding: 5px;
border-radius: 2px;
box-shadow: 1px 1px 3px #666;
font-weight: 900;
}
.button:active {
color: #fff;
box-shadow: none;
}
.green {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='darkblue', endColorstr='blue');
background-image: -webkit-gradient(linear, left top, left bottom, from(darkgreen), to(green));
background-image: -moz-linear-gradient(top, darkblue, blue);
background-image: -o-linear-gradient(top, darkblue, blue);
background-image: -ms-linear-gradient(top, darkblue, blue);
color: rgba(255,255,255,0.6);
}
</style>

sekian koleksi elegant css3 button dari saya. apabila ada pertanyaan, silahkan tinggalkan komentar pada form di bawah.