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 [ 128 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
  14. wew pseudo elemen memang mantap

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

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

    ReplyDelete
  17. 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
  18. 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
  19. Woow, bagus banget. Nice share :D

    Komen bali, ya :-D

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

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

      Delete
  21. 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
  22. mantep sob,,,
    izin copy nya? kanggo di apply di tempat kuli,,,

    nuhun
    wilujeng ngeblog

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

    ReplyDelete
  24. 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
  25. 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
  26. saya ambil yah gan buttonnya :)

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

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

    ReplyDelete
  29. berkunjung kembali

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

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

    kalo ngijinin sih :D
    sebelumnya makasih sob :)

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

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

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

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

    ReplyDelete
  36. Yerima kasih info yang sangat berguna.

    ReplyDelete
  37. wew,keren sob :D ;) =)) :) :(

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

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

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

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

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

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

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

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

    ReplyDelete
  46. wah keren sob,, :)

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

    ReplyDelete
  48. keren banget nih tutorialnya, thanks ya

    ReplyDelete
  49. keren bro..... cara buatnya mantapp

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

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

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

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

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

    ReplyDelete
  55. 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
  56. Thank you Infonya, kalok ada waktu ntar aku coba deh :)
    Blog

    ReplyDelete
  57. This comment has been removed by the author.

    ReplyDelete
  58. untuk button submit koq gagal ya gan? terima kasih

    ReplyDelete
  59. master,ini blog pake apa ya? kok bisa blog nya ketika loading ,buka halaman, perlahan-lahan dari buram manjadi jelas halaman yang di tampilkannya? ane penasaran dan ingin menambah pengalaman ane ...ane baru jumpa yg kaya gini

    ReplyDelete
  60. This comment has been removed by the author.

    ReplyDelete
  61. This comment has been removed by the author.

    ReplyDelete
  62. Tombol2nya terlihat keren, mau gue coba ah

    http://renseo.blogspot.com/2017/02/investasi-apartemen-di-signature-park-grande.html

    ReplyDelete
  63. Terimakasih udah share informasi tutorial Cara Membuat Buttons dengan CSS. semoga bisa saya praktekin dalam web.
    Website saya https://sriseptiarini.mahasiswa.atmaluhur.ac.id
    Website Kampus http://www.atmaluhur.ac.id

    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