Membuat Button Dengan CSS3 - Pada kesempatan kali ini saya akan share tentang cara membuat button link dengan CSS3 . Button kali ini cukup keren karena banyak warna-warna menggemaskan yang bisa brada pilih . Penggunaan button dengan link didalamnya seperti yang telah diketahui , yaitu untuk membuat tombol demo atau download atau apalah terserah brada. Untuk lebih jelasnya silahkan lihat demonya
Kustomisasi
- Masuk pada Edit HTML
- Cari kode ]]></b:skin>
- Masukan kode dibawah ini dan tempatkan diatas kode ]]></b:skin>
.button{Untuk menempatkan button pada postingan silahkan brada masukan kode dibawah ini , pada modus HTML
padding:5px 15px 5px 15px;
text-decoration: none;
display: inline-block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
outline:none;
position:relative;
font-size: 32px;
margin:10px;
background:transparent url(buttonover.png) repeat-x top left;
white-space:nowrap;
}
.button:hover{
background-color: #777;
}
.button:active{
top: 1px;
left:1px;
}
.shadow{
background-color: #a3a3a3;
border: 2px solid #777;
color: #FFF;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}
.engraved{
background: #666;
border: 2px solid #777;
color: #000;
text-shadow: 0px 1px 1px #fff;
font-weight: bold;
}
.glow{
color: #fff;
background: #888;
border: 2px solid #777;
text-shadow: 1px 1px 6px #fff;
}
.white{
color: #fff;
background: #fff;
text-shadow: 1px 1px 4px #000;
border: 2px solid #f0f0f0;
font-family: "Arial";
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;
}
.white:hover{
background-color:#f1f1f1;
}
.red{
background-color: #B00000;
border: 1px solid #7F0000;
color: #FFF;
text-shadow: 1px 1px 4px #000;
font-family: "Palatino Linotype";
}
.red:hover{
background-color:#800000;
}
.lightblue{
background-color: #7FB0F0;
color: #FFF;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
font-weight:100;
}
.lightblue:hover{
background-color:#7FA0C0;
}
.olive{
background-color: #B0E000;
border: 1px outset #D0E000;
color: #FFF;
font-style:italic;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
.olive:hover{
background-color: #90A000;
}
.orange{
background-color: #FFCC00;
border: 1px outset #F2FF00;
color: #FFF;
font-family:Helvetica;
font-weight:bold;
}
.orange:hover{
background-color: #FF8000;
}
.pink{
background-color: #C0107F;
border: 1px outset #70107F;
color: #FFF;
font-family:"Georgia";
font-weight:bold;
}
.pink:hover{
background-color: #F0107F;
}
.pink:active{
border: 1px inset #70107F;
}
.sea{
background-color: #20807F;
color: #FFF;
}
.sea:hover{
background-color: #60807F;
}
.rose{
background-color: #F07FD0;
color: #FFF;
font-family: "Palatino Linotype";
font-style: italic;
letter-spacing:-1px;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
}
.rose:hover{
background-color: #B07FA0;
}
.black{
background-color: #000;
background-image:url(buttonover2.png);
color: #FFF;
letter-spacing:-1px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
.black:hover{
background-color: #777;
}
.sand{
background-color: #FFF090;
background-image:url(buttonover2.png);
color: #fff;
letter-spacing: 3px;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.sand:hover{
background-color: #F0C07F;
}
.violet{
background-color: #9400D3;
background-image:url(buttonover2.png);
color: #777;
font-family:"Arial Black";
text-shadow: 0px 1px 1px #fff;
}
.violet:hover{
background-color: #8A2BE2;
}
.green{
background-color: #32CD32;
background-image:url(buttonover2.png);
color: #fff;
font-family:"Century Gothic";
text-transform:uppercase;
font-style:italic;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.green:hover{
background-color: #2F4F4F;
}
.darkblue{
background-color: #00008B;
background-image:url(buttonover2.png);
color: #fff;
font-family:"Impact";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.darkblue:hover{
background-color: #191970;
}
.sunset{
background-color: #FF6347;
background-image:url(buttonover2.png);
color: #777;
font-family:"Palatino Linotype";
text-transform:uppercase;
text-shadow: 0px 1px 1px #fff;
}
.sunset:hover{
background-color: #FF7F50;
}
.choco{
background-color: #D2691E;
background-image:url(buttonover2.png);
color: #fff;
font-family:"Gill Sans";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.choco:hover{
background-color: #D2B48C;
}
.cadet{
background-color: #5F9EA0;
background-image:url(buttonover2.png);
color: #fff;
font-family: "Arial Narrow";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.cadet:hover{
background-color: #008080;
}
.aqua{
background-color: #00FFFF;
background-image:url(buttonover2.png);
color: #fff;
font-family: "Tahoma";
text-shadow: 1px 1px 4px #000;
}
.aqua:hover{
background-color: #00FFCC;
}
<a href="#" class="button shadow">Action Blog</a>Rubah tulisan Action Blog dan # Ganti dengan link sesuai keinginan brada.
<a href="#" class="button engraved">Action Blog</a>
<a href="#" class="button glow">Action Blog</a>
<a href="#" class="button white">Action Blog</a>
<a href="#" class="button red">Action Blog</a>
<a href="#" class="button lightblue">Action Blog</a>
<a href="#" class="button olive">Action Blog</a>
<a href="#" class="button orange">Action Blog</a>
<a href="#" class="button pink">Action Blog</a>
<a href="#" class="button sea">Action Blog</a>
<a href="#" class="button rose">Action Blog</a>
<a href="#" class="button black">Action Blog</a>
<a href="#" class="button sand">Action Blog</a>
<a href="#" class="button violet">Action Blog</a>
<a href="#" class="button green">Action Blog</a>
<a href="#" class="button darkblue">Action Blog</a>
<a href="#" class="button sunset">Golden Sunset</a>
<a href="#" class="button choco">Action Blog</a>
<a href="#" class="button cadet">Action Blog</a>
<a href="#" class="button aqua">Action Blog</a>
Source : Tympanus.net
Kerennnn pull kolor... :d
BalasHapusAmankeun hla kan siapa tau nanti butuh....
teu usum full kolor ayeuna mah kang... usum full boxer :>)
HapusLain full boxer kang tapi full casbon heuheu :d
HapusEndah Kang sueur rea ku warna,.
HapusNyiamak saja, kode script nya panjang berat gak Kang?
Mau nyoba praktek sambil belajar terapin di blog saya..
sedang-sedang saja hehe .. asyk sama-sama belajar atuh
Hapuswow mantab kode nya css3. ^^
BalasHapusiya sob lumayan css3 ...
HapusMenarik Yeuh Kang, ngiring nyimak
BalasHapusSambil belajar nih,.biar kata Kang ismet teu usum
Tapi niche artikel nya dan tulus berbaginya yah Kang..
Sukses semangat 45 terus yah Kang,, saya support
dalam urusan ngeblog saya mah lurus bagai keris ( keris kan belok belok :-d ) .. tapi yg pasti hanya tau satu kata " berbagi " sob 8-)
HapusHabis ini mesti..kang Ruly..bagi2 sembako...hehe :)
Hapuswaduh gawat mas .. semuanya serba mahal !!!
Hapusnuhun kang ruly hehe pesen buttonnya ah satu :)
BalasHapusmangga dicandak we atuh bade sadayana ge wios kang andes.. :-d
HapusSy juga pesen satu ya kang..cuma ndak di pakein sambel..hehe :)
Hapushehe .. jadi inget ka orang garut mas ..yg entah dimana rimabnya ( kang dede )
Hapuskang dede oge ngubek2 duta mungkin kang hehe :)
Hapusbiasa job'y numpuk mas ..
HapusElegance kang Rul
BalasHapusPenuh warna kayak pelangi di langit..hehe :)
bukan dilangit mas tapi dihatiku haha =))
Hapusngeri hatinya kang ruly udah penuh button sekarang haha :D
Hapushahaha .. dari pada penuh niat buruk mas hehe (b)
Hapuswah ini baru mantap brada, apalagi dengan warnanya yang sangat menarik. Memang sangat mengesankan jika dipasang untuk sebuah blog
BalasHapusmantap brada
terima kasih sudah berbagi
lumayan mas .. ntuk sekedar menghiasi
Hapusbeur... kereeem abis dech :)
BalasHapusyoyoy :d
HapusAduh gk tahan liat button kerennya. :D
BalasHapuslumayan sob buat koleksi'an (o)
HapusKeren banget kang Rul, membuat tampilan blognya lebih berwarna, sip deh saya simpen dulu buat besok-besok :)
BalasHapusyoi mas .. hidup berwarna hehe
Hapustah... teu serab ayeuna mah :) eta teh privacy police, atanapi policy :) polisi ketang
BalasHapusbakat ku teu apal jang tombol naon eta teh kang hehe jadi sabalangbentor :>)
Hapusulin karuhun kamana?
Hapuskertapa kang neangan nu amis-amis hehe
Hapuswew keren om :)
BalasHapus- salam damai -