Cara Membuat CSS Button/ Tombol Css

Oleh -
Berikut ini adalah daftar CSS Button yang bisa kamu terapkan dalam blogmu. Beberapa Saya desain sendiri, dan beberapa lagi adalah hasil mengambil dari desain situs-situs yang Saya kunjungi. Halaman ini akan terus bergerak dan akan terus diperbaharui andaikan Saya mendapatkan kesempatan untuk hidup lebih lama (dramatis). Oke ini dia...

Daftar CSS Button untuk Kerangka Dasar:


<input value="Button" type="button">
<input value="Submit" type="submit">
<input value="Reset" type="reset">
<button>Tag Button</button>


Mirip Tuts+ Premium

CSS Button Tuts Plus

css button tutplus

/* Tuts+ */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  cursor:pointer;
  border:1px solid #e7a943;
  border-bottom-color:#d6982f;
  border-top-color:#f5b74e;
  color:#623f1d;
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  padding:10px 18px;
  text-decoration:none;
  text-shadow:0 1px 0 #fede9d;
  -webkit-box-shadow:0px 1px 2px #d9d9d9, inset 0px 1px 0px #ffe598;
  -moz-box-shadow:0px 1px 2px #d9d9d9, inset 0px 1px 0px #ffe598;
  box-shadow:0px 1px 2px #d9d9d9, inset 0px 1px 0px #ffe598;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  background-color:#feda71;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#feda71), to(#febb49));
  background-image:-webkit-linear-gradient(top, #feda71, #febb49);
  background-image:-moz-linear-gradient(top, #feda71, #febb49);
  background-image:-ms-linear-gradient(top, #feda71, #febb49);
  background-image:-o-linear-gradient(top, #feda71, #febb49);
  background-image:linear-gradient(top, #feda71, #febb49);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#feda71', EndColorStr='#febb49');
  outline:none;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-color:#fee296;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#fee296), to(#fec166));
  background-image:-webkit-linear-gradient(top, #fee296, #fec166);
  background-image:-moz-linear-gradient(top, #fee296, #fec166);
  background-image:-ms-linear-gradient(top, #fee296, #fec166);
  background-image:-o-linear-gradient(top, #fee296, #fec166);
  background-image:linear-gradient(top, #fee296, #fec166);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#fee296', EndColorStr='#fec166');
}


Mirip CSS-TRICKS (2011)

CSS Button CSS Tricks

css button css-tricks

/* CSS-TRICKS */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  display:inline-block;
  position:relative;
  padding:7px 15px;
  -webkit-border-radius:18px;
  -moz-border-radius:18px;
  border-radius:18px;
  font:15px/1.4 "myriad-pro-1","myriad-pro-2","Lucida Grande",Sans-Serif;
  background-color:#b6d3f4;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#b6d3f4), to(#5483b8)) !important; 
  background-image:-webkit-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  background-image:-moz-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  background-image:-ms-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  background-image:-o-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  color:white !important;
  box-shadow:inset 0 1px 1px white,0 3px 3px rgba(0,0,0,0.6);
  border:1px solid #9ac9ff !important;
  font-weight:600;
  text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  box-shadow:inset 0 2px 6px white,0 3px 3px rgba(0,0,0,0.6);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
  top:2px;
}


Mirip Buyatoyota.com


Green CSS Button

css button green

/* Buy A Toyota */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  outline:none;
  cursor:pointer;
  text-decoration:none;
  font:bold 70% Verdana,sans-serif;
  text-transform:uppercase;
  padding:3px 10px 4px;
  text-shadow:1px 1px 2px #17703e;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  color:#fff;
  border:1px solid #17793E;
  background:#17793E url('http://1.bp.blogspot.com/-GX5RKsbVap0/TkDsfUXdcAI/AAAAAAAAApw/bRikIRqTrFY/s1600/buyatoyota.png') repeat-x;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  opacity:0.9;
  filter:alpha(opacity=90);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  position:relative;
  top:1px;
}


Mirip Abu Farhan

CSS Button Abu Farhan

css button abu-farhan

/* Abu Farhan */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  outline:none;
  cursor:pointer;
  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:1px 1px 4px #AAAAAA;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  color:#fef4e9;
  border:2px solid white !important;
  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');
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  text-decoration:none;
  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');
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  position:relative;
  top:1px;
  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');
}


Biru Segar Hompimpa

CSS Button Hompimpa

css button blue

/* Biru Segar Hompimpa */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  font:normal 0.9em Arial,Sans-Serif;
  background:url('http://1.bp.blogspot.com/-i8a-1q97r_o/ThQRxeTBjzI/AAAAAAAAAZQ/YfCsBiEpQwI/s1600/button.png') repeat-x;
  border:0;
  padding:5px 10px;
  color:#fff;
  text-shadow:0 1px 2px #222;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-position:0 -9px;
  color:#fff;
  text-decoration:none;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background:#000;
  outline:none;
}


Mirip Setting AddThis

CSS Button AddThis

css button gray

/* AddThis */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:url('http://2.bp.blogspot.com/-NUbFYgrfMZw/Tf_5hAd49GI/AAAAAAAAATY/FDzgMXQvKlQ/s1600/tombol.gif') repeat-x scroll 0 0 #EDEDED;
  border:1px solid #B7B7B7;
  padding:8px 22px;
  color:#000;
  text-shadow:0 1px 2px #fff;
  -webkit-box-shadow:0 1px 2px #ccc;
  -moz-box-shadow:0 1px 2px #ccc;
  box-shadow:0 1px 2px #ccc;
  -webkit-border-radius:16px;
  -moz-border-radius:16px;
  border-radius:16px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-position:0 -35px;
  background-color:#DFDFDF;
  border-color:#AFAFAF;
  color:#000;
  cursor:pointer;
  text-decoration:none;
}


input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background-position:0 -70px;
  background-color:#D4D3D3;
  outline:medium none;
}


Mirip Yahoo!

CSS Button Yahoo

css button yahoo!

/* Yahoo! */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#fa2 url('http://3.bp.blogspot.com/-OWOuIfroX6k/ThUdocPWgtI/AAAAAAAAAZw/jGjdN5POwmQ/s1600/yahoo.jpg') repeat-x;
  padding:3px 7px;
  border:1px solid #644e12;
  text-decoration:none;
  color:#000;
  font:bold 0.9em Arial,Sans-serif;
  cursor:pointer;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  opacity:0.9;
  filter: alpha(opacity=90);
}


Mirip Google

CSS Button Google

css button google

/* Google */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#ccc url('http://3.bp.blogspot.com/-EjKdL802bcA/ThUhSH3XEkI/AAAAAAAAAZ4/h_4Vu7imfys/s1600/buttongoogle.jpg') repeat-x;
  padding:5px 10px;
  border-width:1px;
  border-style:solid;
  border-color:#dfdfdf #aaa #aaa #dfdfdf;
  text-decoration:none;
  color:#000;
  font:normal 0.9em Arial,Sans-Serif;
  -webkit-box-shadow:1px 1px 0 #eee;
  -moz-box-shadow:1px 1px 0 #eee;
  box-shadow:1px 1px 0 #eee;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background:#aaa;
  border:1px solid #999;
}




Mirip Blogger (2010)



CSS Button Blogger

css button blogger

/* Blogger */

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#6598FF url('http://1.bp.blogspot.com/-qOzc14mMCBM/ThU480aWdhI/AAAAAAAAAbA/VpYEc0XpRUo/s1600/bloggerbiru.jpg') repeat-x;
  border:1px solid #003399;
  padding:3px 7px;
  font:bold 12px Arial,sans-serif;
  color:#fff;
  text-transform:uppercase;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

input[type="submit"],
button {
  background:#FF7602 url('http://3.bp.blogspot.com/-Dsbg9WwDuq4/ThU4_uxFFnI/AAAAAAAAAbI/1ZdGECVZtaI/s1600/bloggeroren.jpg') repeat-x;
  border:1px solid #662f00;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  border:1px solid #000;
}



Mirip Facebook



CSS Button Facebook

css button facebook

/* Facebook */

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#6079AB url('http://1.bp.blogspot.com/-qqIWi8HlrT0/ThUXzdggHfI/AAAAAAAAAZo/yG6zvJe1Igk/s1600/butonfbbiru.jpg') repeat-x;
  border:1px solid #29447E;
  border-bottom-color:#1A356E;
  padding:2px 5px 4px;
  font:bold 11px Tahoma,Verdana,Arial,sans-serif;
  color:#fff;
  -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2);
  box-shadow:0 1px 0 rgba(0,0,0,0.2);
  cursor:pointer;
}

input[type="submit"],
button {
  background:#67A54B url('http://2.bp.blogspot.com/-Svb_PRzSLuE/ThUWJnJs8cI/AAAAAAAAAZg/u5Qu-m9mNqQ/s1600/facebookbutton.jpg') repeat-x;
  border:1px solid #3B6E22;
  border-bottom-color:#2C5115;
  padding:5px 10px 6px;
}



Kinclong Menginclong





css button kinclong

/* Kinclong Menginclong */

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#135295 url('http://4.bp.blogspot.com/-zsVYM7TZ5MY/ThUopiHuKoI/AAAAAAAAAaA/5t2_qiAVKcU/s1600/menu_hover.gif') repeat-x;
  border:0;
  padding:4px 7px;
  font:bold 11px Verdana,Arial,Sans-Serif;
  color:#c1e5ec;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  opacity:0.7;
  filter: alpha(opacity=70);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  color:#f9d2f4;
}



Tombol Hitam untuk Blog Hitam





css button dark

/* Hitam untuk Hitam */

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#333;
  border:0;
  padding:5px 7px;
  font:bold 11px Verdana,Arial,Sans-Serif;
  color:#91dd4b;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background:#284918;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background-color:#fff;
  color:#b82354;
}



Hover Menyala





css button hover menyala

/* Hover Menyala */

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  font:bold 12px Verdana,Arial,Sans-Serif;
  padding:3px 15px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  color:#999;
  border:5px outset #444 !important;
  background:#444;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  -webkit-box-shadow:0 1px 5px #d0fbf7,0 1px 15px #d0fbf7,0 1px 25px #d0fbf7;
  -moz-box-shadow:0 1px 5px #d0fbf7,0 1px 10px #d0fbf7,0 1px 25px #d0fbf7;
  box-shadow:0 1px 5px #d0fbf7,0 1px 10px #d0fbf7,0 1px 25px #d0fbf7;
  color:#fff;
}



Janda Kembang





css button violet

/* Janda Kembang */

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  font:normal 12px Arial,Sans-Serif;
  padding:3px 15px;
  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 3px #666;
  -moz-box-shadow:0 1px 3px #666;
  box-shadow:0 1px 3px #666;
  color:#fff;
  border:2px solid #e9e9e9 !important;
  background:#8899d0;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  -webkit-transform:rotate(-10deg);
  -moz-transform:rotate(-10deg);
  -ms-transform:rotate(-10deg);
  -o-transform:rotate(-10deg);
  transform:rotate(-10deg);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  -webkit-transform:rotate(10deg);
  -moz-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
  -o-transform:rotate(10deg);
  transform:rotate(10deg);
  background:#8899a0;
}



Apel Anemia





css button red
/* Apel Anemia */

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:url('http://4.bp.blogspot.com/-ZwWV6WKSrj8/ThexOzGH6aI/AAAAAAAAAdI/6xfWx5zt-aA/s1600/apelanemia.jpg') repeat-x;
  border:0;
  padding:3px 15px 4px;
  font:bold 11px Verdana,Arial,sans-serif;
  color:#f3fcd5;
  text-shadow:0 1px 2px #222;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
  -webkit-box-shadow:0 1px 3px #aaa;
  -moz-box-shadow:0 1px 3px #aaa;
  box-shadow:0 1px 3px #aaa;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-position:0 -7px;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background-position:bottom;
}

Pelajari tutorial awalnya di sini

Sumber: HompimpaAlaihumGambreng

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Melindungi Artikel Dari Copy-Paste

Oleh -
Gambar
Proyek ini bertujuan untuk melindungi postingan-postingan di blogmu agar tidak mudah disalin oleh para pengunjung. Sekarang coba masuk ke tab Rancangan kemudian pilih Edit HTML . Untuk menonaktifkan fungsi blok dan klik-kanan mouse sebenarnya sangatlah sederhana. Kamu hanya perlu mengganti tag <body> dengan kode ini: <body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'> Klik Simpan Template kemudian lihat halaman blogmu. Sekarang coba klik-kanan mouse mu, maka tidak akan ada menu apapun yang akan tampil. Coba juga untuk mengeblok tulisan-tulisan di halamanmu. Tidak bisa kan? Begitulah salah satu cara jitu untuk melindungi hasil karyamu di blog. Namun sayangnya, cara ini juga mempunyai sebuah efek samping, yaitu akan membuat kotak penelusuran posting bawaan dari template blogmu menjadi tidak berfungsi. Satu-satunya jalan keluar untuk mengatasi masalah ini mungkin hanya dengan menampilkan kembali navbar...
Baca selengkapnya

Membuat Efek Bayangan CSS Text Shadow

Oleh -
Gambar
Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada teks: span { text-shadow:10px 10px 7px #222; } Aturannya sama persis dengan CSS Box Shadow : 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. CSS Text Shadow Inset itu tidak ada, namun keterbatasan tersebut bukan berarti bahwa kamu tidak bisa membuat efek-efek yang lebih dahsyat. Dengan sedikit kreativitas, sebenarnya kamu juga bisa membuat efek bayangan teks inset (baca tutorialnya di sini ). Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini: Top-Down Inline <style type='text/css'> #teks1 {text-shadow:10px 10px 7px #222;} </style> ...... <div id='teks1'> TEKS </div> <div style='text-shadow:10px 10px 7px #222;'> TEKS </div> ...
Baca selengkapnya

Membuat Efek Bayangan CSS Box Shadow

Oleh -
Gambar
Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek: CSS Bayangan Outset: div { -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */ -moz-box-shadow:10px 10px 7px #222; /* Firefox */ box-shadow:10px 10px 7px #222; /* W3C */ } CSS Bayangan Inset: div { -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */ -moz-box-shadow:inset 10px 10px 7px #222; /* Firefox */ box-shadow:inset 10px 10px 7px #222; /* W3C */ } 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini: Top-Down Inline #kotak1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='kota...
Baca selengkapnya