share all free for you

Advertiser Here

Cara Membuat Buttons Keren dengan CSS

Hallo Sobat Blogger semua,, kali ini saya akan share tutor nih,sepertinya sudah lama saya tidak share tutor, oleh karena itu kali ini saya akan share Cara Membuat Buttons Keren dengan CSS. Sebenarna Button dengan CSS ini bukan buatan saya tapi saya hanya share saja. Pembuat buttons ini adalah Catalin Rosu dia seorang web designer. berikut screenshotnya :


Pertama silahkan masukan CSS berikut kedalam template sobat
.button
{      
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
 
.button:hover
{
background-color: #eee;      
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}
 
.button:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
 
.button:focus
{
outline: 0;
background: #fafafa;
}  
 
.button:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;      
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;  
pointer-events: none;
}

/* Buttons and inputs */

button.button, input.button
{
cursor: pointer;
overflow: visible; /* removes extra side spacing in IE */
}

/* removes extra inner spacing in Firefox */
 button::-moz-focus-inner
{
border: 0;
padding: 0;
}

/* If line-height can't be modified, then fix Firefox spacing with padding */
input::-moz-focus-inner
{
padding: .4em;
}
/* The disabled styles */
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover
{
background: #eee;
color: #aaa;
border-color: #aaa;
cursor: default;
text-shadow: none;
position: static;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
 
/* Hexadecimal entities for the icons */
 
.add:before
{
content: "\271A";
}
 
.edit:before
{
content: "\270E";      
}
 
.delete:before
{
content: "\2718";      
}
 
.save:before
{
content: "\2714";      
}
 
.email:before
{
content: "\2709";      
}
 
.like:before
{
content: "\2764";      
}
 
.next:before
{
content: "\279C";
}
 
.star:before
{
content: "\2605";
}
 
.spark:before
{
content: "\2737";
}
 
.play:before
{
content: "\25B6";
}
/* Social media buttons */
.tw, .fb,
.tw:hover, .fb:hover
{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.tw, .tw:focus
{
background-color: #88E1E6;
}

.fb, .fb:focus
{
background-color: #3C5A98;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.tw:hover
{
background-color: #b1f0f3;
}

.fb:hover
{
background-color: #879bc3;
}

.tw:before
{
content: "t";
background: #91cfd3;
background: rgba(0,0,0,.1);
color: #fff;
font-family: verdana;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
 
.fb:before
{
content: "f";
background: #4467ac;
background: rgba(0,0,0,.1);
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
Selanjutnya adalah cara memanggilnya,berikut caranya :
<a href="#" class="button">Button</a>
Catatan :
  • Ubah kode yang berwarna hijau dengan url sobat
  • Kata yang berwarna merah dengan jenis buttons yang sobat inginkan
  • Sedangkan teks yang berwarna biru dengan kata yang sobat inginkan
Berikut kode-kode buttonsnya
<a href="" class="button">Button</a>
<a href="" class="button add">Add</a>
<a href="" class="button edit">Edit</a>
<a href="" class="button delete">Delete</a>
<a href="" class="button save">Save</a>
<a href="" class="button email">Send email</a>
<a href="" class="button like">Like</a>
<a href="" class="button next">Next</a>
<a href="" class="button star">Favourite</a>
<a href="" class="button spark">Spark</a>
<a href="" class="button play">Play</a>
<a href="" class="button tw">Follow me</a>
<a href="" class="button fb">Become a fan</a>
Sumber : RTD

Title : Cara Membuat Buttons Keren dengan CSS
URL : http://blogcunayz.blogspot.com/2012/04/cara-membuat-buttons-keren-dengan-css.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Membuat Buttons Keren dengan CSS sebagai Sumbernya.

Sudah ada [ 110 komentar ] bagaimana pendapat Anda,,?

  1. Replies
    1. lelet ya koneksinya
      hahahahaa

      Delete
    2. hahaha iya nih coy kayaknya harus di restar dulu tapi males ah

      hahaha

      Delete
    3. (lepas dari artikel)
      tiap masuk blog ini , saya bingung...kelewat canggih soalnya, maklumin yah.
      untuk berkomentar azh butuh waktu 5 menit untuk cari dimana dan bagaimana caranya berkomentar disini.
      templatenya berseni dan nyentrik..mau dong om.

      Delete
    4. wkwkwk sorry kalo blog saya bikin pusing

      thank om,mau apa om?

      Delete
  2. Keren tuh tampilannya sob, tapi gue cukup yang bawaan blogger aja deh.. :D

    ReplyDelete
  3. kereen uy...boleh kalau ada waktu senggang di tes nih.
    makasih inpona...liat blogroll terpanas deh

    ReplyDelete
    Replies
    1. hatur thank you kang,,silahkan gan
      sama2,,maksudnya kmha kang?

      Delete
  4. keren2 sob buttonsnya, ane coba dulu. mksih sblumnya

    ReplyDelete
  5. keren keren nih buttomnya sobat...

    ReplyDelete
  6. wow.. Mantab dan apik butonya sobat..

    ReplyDelete
  7. wah asik dan menarik ya kalo dibuat gitu buttons jadi bener keren :)

    ReplyDelete
  8. buat apa nie ya gan? masih belum paham e... menarik si spertinya.

    ReplyDelete
    Replies
    1. buttons ini kalo di bahasa indonesia in artinya tombol,fungsinya untuk membuat link di postingan kita jadi tampil lebih menarik gan

      Delete
  9. wah mantap tu gan, tadi ta liat demonya. btw bisa buat selain magazine ga ya?

    ReplyDelete
  10. Replies
    1. jiah master dari mana sob,eang headernya mau kaya gimana sob?

      Delete
  11. kalau ini ya saya uda pakai
    tinggal menyesuaikan warna biar pas dengan background :D

    ReplyDelete
    Replies
    1. sama saya juga sudah lama pakai cuma baru sekarang di share,
      betul gan tinggal sesuikan dengan tampilan blog kita

      Delete
  12. Keren banget tuh buttonnya dengan CSS nya...
    Siplah

    ReplyDelete
  13. Kunjungan silaturahmi saudaraku di sini

    ReplyDelete
    Replies
    1. trimakasih atas kunjungan silaturahminya.

      Delete
  14. wah menari ni gan, mantap kali tu butoonya. bisa di aplikasikan nie gan makasih ya.

    ReplyDelete
  15. kereen banget nih sob :D
    thanks ya buat tutorialnya...

    ReplyDelete
  16. Aku udah terapin bang, tapi warnanya aku ganti? :) hehehehehe cek this out on my blog?

    ReplyDelete
    Replies
    1. Bang blog ane itu adminnya kagak rame-rame. Adminnya itu cuma saya ajah kok? :) heheheheheh

      Delete
    2. oh saya kira rame2 soalnya dulu banyak linknya di menu blog ente ^_^

      Delete
    3. Heheheheh itu kan banyak yang anggotanya blog deal bang Rizky? :) hehehehe

      Delete
    4. Em kok belum update mas? :) heheheh ditunggu update terbarunya ya.....

      Delete
  17. gue tetep takjub dg template blog ini... ^_^

    ReplyDelete
    Replies
    1. thank gan,tempe jelek kayak gini kok di kagumi

      Delete
    2. APanya yang jelek bang ? :) Ini kan bagus .......

      Delete
  18. Woow, bagus banget. Nice share :D

    Komen bali, ya :-D

    ReplyDelete
  19. Kalau masalah CSS, saya angkat tangan aja deh sobat. Hehe

    ReplyDelete
    Replies
    1. jiah kok angkat tangan kan gak di todong sob hahha

      Delete
  20. Mantap banget buttonnya.. Tanya Bang,cara buat kotak komentar yang muncul seperti blogcunayz donk... Makasih sebelumnya..

    ReplyDelete
    Replies
    1. oh ini kotak komentarnya menggunakan efek overlay slide out box mas

      Delete
  21. mantep sob,,,
    izin copy nya? kanggo di apply di tempat kuli,,,

    nuhun
    wilujeng ngeblog

    ReplyDelete
  22. Berkunjung lagi nih, Sob. :-D

    ReplyDelete
  23. nah ini yang keren punya walau cuman share..trimakasih sobat sudah berbagi :)

    ReplyDelete
    Replies
    1. iya ane cuma share,lagian ane gak bisa apa2 sob,sama2 sob

      Delete
  24. dari Red-Team-Design ya? heheheee

    ReplyDelete
    Replies
    1. iya itukan ada link sumbernya sob :)

      Delete
    2. Wa wah wah MIe mie dimanapun kau berada kau membuatku ketawa......

      Delete
    3. wkwkwk ya Allah coba di lihat lagi di atas terpangpang "Sumber : RTD"

      Delete
  25. saya ambil yah gan buttonnya :)

    ReplyDelete
  26. berkunjunga lgi gan, sambil nunggu postingan barunya :)

    ReplyDelete
  27. wow... emang bener2 keren gan... thank's ya

    ReplyDelete
  28. coba dulu ah tutornya....
    kunjungan gan.... jangan lupa kunjungan baliknya...
    Boriel Cyber ++== - Tutorial Blog | Jadwal Olahraga | Berita Teknologi | Tips n Trik | Sepakbola

    ReplyDelete
  29. pagi sob..
    saya izin liat2 comment floating nya :)
    sekalian izin juga ama source code nya :)

    kalo ngijinin sih :D
    sebelumnya makasih sob :)

    ReplyDelete
  30. keren sobat,, ijin simpan ya...

    ReplyDelete
  31. mantap tombol - tombolnya gan..
    izin mencoba ;)

    ReplyDelete
  32. buton nya keren2! eemm.. nanti kalo saya mau ganti tampilan bisa jadi inspirasi ini mas..

    ReplyDelete
  33. button-nya bagus amat ya.,,,nice share sobat :)

    ReplyDelete
  34. Yerima kasih info yang sangat berguna.

    ReplyDelete
  35. Bang supaya open new tab gmn ???

    ReplyDelete
  36. wuih mantap mas, nice info layak di coba :D

    ReplyDelete
  37. mantap gan makasih nih ilmunya...
    ane follow dulu deh, keren bgt nih blog.. nambah ilmu..:)

    ReplyDelete
  38. wah bagus nih infonya.. lagi butuh tutorial ini buat skripsi.. thanks,..

    ReplyDelete
  39. keren ni, saya mau pasang juga...

    ReplyDelete
  40. Wiiiih, keren Ganb buttonnya. Izin akh mau ane pake d web social bookmark ane. Mantap...

    ReplyDelete
  41. Sori, untuk "Pertama silahkan masukan CSS berikut kedalam template sobat " masukin sebagai widget/HTML atau Add CSS Button?

    ReplyDelete
  42. keren bagnget mas, izin copas ya :)

    ReplyDelete
  43. [blockquote]keren sumpah[/blockquote]

    ReplyDelete
  44. keren banget nih tutorialnya, thanks ya

    ReplyDelete
  45. keren bro..... cara buatnya mantapp

    ReplyDelete
  46. Artikel yang baik dan menarik, saya perlu mencobanya.
    Terima kasih anda sudah berbagi ilmu

    ReplyDelete
  47. mantap infonya gan...bermanfaat sekali buat saya..
    saya yakin sama pembaca yang lain juga bermanfaat. mantap dah.

    ReplyDelete
  48. Keren banget tombol2nya mas...ijin bukmark dulu

    ReplyDelete
  49. terimakasih atas informasinya, salam blogger dan selamat sore aje deh, hehehhe

    ReplyDelete
  50. infonya sangat menarik untuk di simak, di tunggu informasi terbaru Gan....

    ReplyDelete
  51. kok punya ane gagal ya gan ? :( lihat [code]http://aha-blogs.blogspot.com/2014/10/membuat-sitemap-peta-situs-daftar-isi-ala-dte.html[/code]

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah