Daftar CSS Desain Button dari Berbagai Situs
Tabel Konten
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
/* 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-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;
-webkit-box-shadow:inset 0 1px 1px white,0 3px 3px rgba(0,0,0,0.6);
-moz-box-shadow:inset 0 1px 1px white,0 3px 3px rgba(0,0,0,0.6);
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 {
-webkit-box-shadow:inset 0 2px 6px white,0 3px 3px rgba(0,0,0,0.6);
-moz-box-shadow:inset 0 2px 6px white,0 3px 3px rgba(0,0,0,0.6);
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 {
-webkit-box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
-moz-box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
top:2px;
}
Mirip Buyatoyota.com
/* 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
/* 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
/* Biru Segar */
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
/* 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!
/* 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
/* 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)
/* 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
/* 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
/* 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
/* 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
/* 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
/* 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
/* 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
12 Komentar
Unknown
Tak save dulu mas, soalnya aku ga begitu paham sama yang namanya CSS ini.
Alhamdulillah, bertambah satu pengetahuanku dari blog ini dan untuk hari ini :)
Frzhrdynt
Keren kang! :D
antigaptek
mantap mas.. saya bookmark dulu ya ntar belajar dari sini.. di tunggu artikel selanjut nya dan selanjutnya..
akhirnya nemu juga tempat buat bljr css
salam knal mas..
Admin 3
lengkap sekali gan, hehe..!!
makasih ya gan...
Andi AF Studio
wkwkwkwkwk.. janda kembang, ane mah nunggu template bikinan ente aja gan.. :D
Taufik Nurrohman
@Andy A.Fairussalam: Sebenarnya Saya tidak terlalu suka membuat template. Saya lebih suka mengajari orang bagaimana caranya membuat template. ^_^
Andi AF Studio
oke deh, ane berguru :D
Andi AF Studio
eit, janda kembangnya ketinggalan, ane ambil sekarang, semoga yang bikin panjang umur deh (dramatis) wkwkwkwk
Unknown
Toritorial menu css mantap izin coba kak
Taufik Nurrohman
@Spenza-Sumpiuh Wkwkwkwk.. toritorial..
Unknown
Mas ini saya masih bingung, kalau narunya di readmore gimana ya ?
Unknown
maap om ada broken link tuh di sini:
Pelajari tutorial awalnya di sini
:)