Membuat Tombol Unik Dengan CSS

Hey Mas Bro,
Ketemu lagi nich....
Disini aku mau bagi-bagi ilmu, tentang bagaimana caranya membuat Tombol dengan gaya unik di HTML menggunakan CSS.

Ini nich ada beberapa Contoh Tombol unik yang bisa mas bro pake :

Tombol 1 :

CSS :
<style type="text/css">
.styled-tombol-1 {
-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
color:#333;
background-color:#FA2;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
font-family:'Helvetica Neue',Arial,sans-serif;
font-size:16px;
font-weight:700;
height:32px;
padding:4px 16px;
text-shadow:#FE6 0 1px 0
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-1" value="Download" />

Contoh Tombolnya :


Tombol 2 :

CSS :
<style type="text/css">
.styled-tombol-2 {
-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
border-bottom-color:#333;
border:1px solid #61c4ea;
background-color:#7cceee;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#333;
font-family:'Verdana',Arial,sans-serif;
font-size:14px;
text-shadow:#b2e2f5 0 1px 0;
padding:5px
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-2" value="Download" />

Contoh Tombolnya :


Tombol 3 :

CSS :
<style type="text/css">
.styled-tombol-3 {
-webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
-moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0;
background-color:#5B74A8;
border:1px solid #29447E;
font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
font-size:12px;
font-weight:700;
padding:2px 6px;
height:28px;
color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-3" value="Download" />

Contoh Tombolnya :


Tombol 4 :

CSS :
<style type="text/css">
.styled-tombol-4 {
-webkit-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
-moz-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;
background-color:#EEE;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
border:1px solid #999;
color:#666;
font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif;
font-size:11px;
font-weight:700;
padding:2px 6px;
height:28px
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-4" value="Download" />

Contoh Tombolnya :



Tombol 5 :

CSS :
<style type="text/css">
.styled-tombol-5 {
background-color:#ed8223;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:18px;
line-height:30px;
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border:0;
text-shadow:#C17C3A 0 -1px 0;
width:120px;
height:32px
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-5" value="Download" />

Contoh Tombolnya :

Tombol 6 :

CSS :
<style type="text/css">
.styled-tombol-6 {
background:#f78096;
background:-moz-linear-gradient(top,#f78096 0%,#f56778 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f78096),color-stop(100%,#f56778));
background:-webkit-linear-gradient(top,#f78096 0%,#f56778 100%);
background:-o-linear-gradient(top,#f78096 0%,#f56778 100%);
background:-ms-linear-gradient(top,#f78096 0%,#f56778 100%);
background:linear-gradient(top,#f78096 0%,#f56778 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78096',endColorstr='#f78096',GradientType=0);
padding:5px 4px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:12px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #ae4553
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-6" value="Download" />

Contoh Tombolnya :

Tombol 7 :

CSS :
<style type="text/css">
.styled-tombol-7 {
background:#FF5DB1;
background:-moz-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FF5DB1),color-stop(100%,#E94A86));
background:-webkit-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
background:-o-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
background:-ms-linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
background:linear-gradient(top,#FF5DB1 0%,#E94A86 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF5DB1',endColorstr='#E94A86',GradientType=0);
padding:5px 7px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:12px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #E8124F
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-7" value="Download" />

Contoh Tombolnya :

Tombol 8 :

CSS :
<style type="text/css">
.styled-tombol-8 {
background:#25A6E1;
background:-moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background:-webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-8" value="Download" />

Contoh Tombolnya :

Tombol 9 :

CSS :
<style type="text/css">
.styled-tombol-9 {
background:#00A0D1;
background:-moz-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00A0D1),color-stop(100%,#008DB8));
background:-webkit-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
background:-o-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
background:-ms-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
background:linear-gradient(top,#00A0D1 0%,#008DB8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A0D1',endColorstr='#008DB8',GradientType=0);
padding:8px 20px;
color:#cfebf3;
font-family:'Helvetica Neue',sans-serif;
font-size:13px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border:1px solid #095B7E
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-9" value="Download" />

Contoh Tombolnya :

Tombol 10 :

CSS :
<style type="text/css">
.styled-tombol-10 {
background:#5CCD00;
background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0);
padding:10px 15px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:16px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #459A00
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-10" value="Download" />

Contoh Tombolnya :

Tombol 11 :

CSS :
<style type="text/css">
.styled-tombol-11 {
background:#FEDA71;
background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEDA71',endColorstr='#FEBB49',GradientType=0);
padding:8px 18px;
color:#623F1D;
font-family:'Helvetica Neue',sans-serif;
font-size:16px;
border-radius:48px;
-moz-border-radius:48px;
-webkit-border-radius:48px;
border:1px solid #623F1D
}
</style>

Cara Mengunakannya menggunakan "Class" di tombol HTML:
<input type="submit" class="styled-tombol-11" value="Download" />

Contoh Tombolnya :

dfasd