Harga Jual / Beli Bitcoin

Membuat Sexy Buttons Pure CSS

19:39:00 Wahab Saputra 58 Comments


Cara Membuat Tombol Demo dan Download

Cara Membuat Sexy Buttons Pure CSS - Teman Blogger sedang mencari tutorial cara membuat tombol demo dan download untuk posting atau membuat tombol download di blog. Untuk membuat tombol download keren sebenarnya cukup mudah kerena kita hanya membutuhkan CSS dan HTML sederhana untuk membuatnya. Lalu bagaimana untuk membuat download button atau demo button yang keren, responsive, mobile-friendly, sexy dan full color...?. Berikut langkah pembuatannya :

Pastikan template Teman Blogger sudah terpasang Font-Awesome !!!

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika sudah terdapat Font-Awesome... Langsung saja copy kode di bawah sebelum ]]></b:skin> Kemudian Save template.

/* -- WahabSaputra.Com ButtonS --*/  strong{font-weight:700} .button{background-color:#f2f2f2;background-image:linear-gradient(to bottom,#f2f2f2,#f2f2f2);border:1px solid #bfbfbf;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #d9d9d9,inset 0 0 0 1px #f2f2f2,0 2px 4px rgba(0,0,0,.2);color:#8c8c8c;text-shadow:0 1px 0 rgba(255,255,255,.5);border-radius:3px;cursor:pointer;display:inline-block;font-family:Verdana,sans-serif;font-size:12px;font-weight:400;line-height:20px;padding:9px 16px 9px;margin:16px 0 0 16px;transition:all 20ms ease-out;vertical-align:top} .button:focus,.button:hover{background:#f2f2f2;border-color:#8c8c8c;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #d9d9d9,inset 0 0 0 1px #f2f2f2} .button:active{background:#f2f2f2;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button .fa{color:#bfbfbf;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-blue{background-color:#42b0e3;background-image:linear-gradient(to bottom,#42b0e3,#2ba9e3);border:1px solid #107db0;box-shadow:inset 0 1px 0 #7cd4fc,inset 0 -1px 0 #2696c9,inset 0 0 0 1px #59b7e3,0 2px 4px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .button-blue:focus,.button-blue:hover{background:#2ba9e3;border-color:#004c6f;box-shadow:inset 0 1px 0 #7cd4fc,inset 0 -1px 0 #2696c9,inset 0 0 0 1px #59b7e3} .button-blue:active{background:#2ba9e3;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-blue .fa{color:#107db0;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-green{background-color:#97cc76;background-image:linear-gradient(to bottom,#97cc76,#8bcc62);border:1px solid #5f993a;box-shadow:inset 0 1px 0 #c6e5b3,inset 0 -1px 0 #79b356,inset 0 0 0 1px #a4cc8b,0 2px 4px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .button-green:focus,.button-green:hover{background:#8bcc62;border-color:#326612;box-shadow:inset 0 1px 0 #c6e5b3,inset 0 -1px 0 #79b356,inset 0 0 0 1px #a4cc8b} .button-green:active{background:#8bcc62;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-green .fa{color:#5f993a;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-purple{background-color:#847bba;background-image:linear-gradient(to bottom,#847bba,#7568ba);border:1px solid #493e87;box-shadow:inset 0 1px 0 #bab6d4,inset 0 -1px 0 #655aa1,inset 0 0 0 1px #948dba,0 2px 4px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .button-purple:focus,.button-purple:hover{background:#7568ba;border-color:#1f1654;box-shadow:inset 0 1px 0 #bab6d4,inset 0 -1px 0 #655aa1,inset 0 0 0 1px #948dba} .button-purple:active{background:#7568ba;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-purple .fa{color:#493e87;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-orange{background-color:#f58a38;background-image:linear-gradient(to bottom,#f58a38,#f57c20);border:1px solid #c25706;box-shadow:inset 0 1px 0 #ffb984,inset 0 -1px 0 #db6f1d,inset 0 0 0 1px #f59851,0 2px 4px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .button-orange:focus,.button-orange:hover{background:#f57c20;border-color:#730;box-shadow:inset 0 1px 0 #ffb984,inset 0 -1px 0 #db6f1d,inset 0 0 0 1px #f59851} .button-orange:active{background:#f57c20;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-orange .fa{color:#c25706;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-red{background-color:#ed6d64;background-image:linear-gradient(to bottom,#ed6d64,#ed574c);border:1px solid #ba3329;box-shadow:inset 0 1px 0 #ffb0aa,inset 0 -1px 0 #d44d44,inset 0 0 0 1px #ed837b,0 2px 4px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .button-red:focus,.button-red:hover{background:#ed574c;border-color:#870c03;box-shadow:inset 0 1px 0 #ffb0aa,inset 0 -1px 0 #d44d44,inset 0 0 0 1px #ed837b} .button-red:active{background:#ed574c;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-red .fa{color:#ba3329;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-yellow{background-color:#fce374;background-image:linear-gradient(to bottom,#fce374,#fcdf5b);border:1px solid #c9ae34;box-shadow:inset 0 1px 0 #fff6ce,inset 0 -1px 0 #e3c852,inset 0 0 0 1px #fce88d,0 2px 4px rgba(0,0,0,.2);color:#967d09;text-shadow:0 1px 0 rgba(255,255,255,.5)} .button-yellow:focus,.button-yellow:hover{background:#fcdf5b;border-color:#967d09;box-shadow:inset 0 1px 0 #fff6ce,inset 0 -1px 0 #e3c852,inset 0 0 0 1px #fce88d} .button-yellow:active{background:#fcdf5b;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-yellow .fa{color:#c9ae34;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button .fa{float:left;font-size:14px;line-height:20px;margin:-1px 8px 0 -4px;vertical-align:top}

Untuk penggunaanya, silahkan terapkan kode di bawah ini !

<div style="text-align: center;"> <a class="button" href="LINK" target="_blank"> <i class="fa fa-cloud-download"></i> <strong>Download</strong> </a> <a class="button button-purple" href="LINK" target="_blank"> <i class="fa fa-rocket"></i> Live <strong>Demo</strong> </a> </div> <div class="clear"></div>

Maka hasilnya akan tampak seperti di bawah ini :



Style atau Model lainnya :

<a class="button button-yellow" href="LINK" target="_blank"> <i class="fa fa-clock-o"></i> Waiting for <strong>confirmation</strong> </a>
Waiting for confirmation


<a class="button button-orange" href="LINK" target="_blank"> <i class="fa fa-exclamation-triangle"></i> Watch <strong>out!</strong> </a>
Watch out!


<a class="button button-red" href="LINK" target="_blank"> <i class="fa fa-times"></i> Order <strong>cancelled</strong> </a>
Order cancelled


<a class="button button-blue" href="LINK" target="_blank"> <i class="fa fa-globe"></i> Hello <strong>World</strong> </a>
Hello World


<a class="button button-green" href="LINK" target="_blank"> <i class="fa fa-check"></i> Order <strong>received</strong> </a>
Order received


Demikian tutorial kali ini tentang cara membuat tombol demo dan download pada blogspot/blogger, semoga bermanfaat. Sekian dan tengkiu...

58 comments:

  1. Keren
    sankyu tipsnya, tombolnya buat link download biar jelas nih :D

    ReplyDelete
  2. oo jadi begini cara buatnya ya. heheheh saya save ah halaman ini. jadi pengen bikin. pengen di coba

    ReplyDelete
    Replies
    1. Iya...Mangs...
      Gampang dan super mudah banget kan...hehhehehe

      Delete
    2. ia mas gampang cuman tinggap copas aja hehehehe.
      mas wahab yang bikinnya ga tau tuh banyak banget kode-kodenya.

      Delete
    3. Gak sampai ngetik ulang kok Mangs,,,
      Menggunakan kode yang sudah ada,,,dan tinggal dicustom dan dimodifikasi...

      Delete
  3. Ya Allah Hab. Gue abis liat apaan barusan diatas. Puyeng langsung pala Barbie.

    ReplyDelete
    Replies
    1. Puyeng...
      Abis liat barisan kode abstrak...
      apa
      Abis liat tombol yang sexy banget itu Dev...?

      Jangan kelamaan lianya..nanti kebawa kedunia lain...

      Delete
  4. Sipz mas...Kebetulan template blog saya udah terpasang..mungkin buat sobat blogger yang lain yg belum pasang, silahkan pasang di blognya, supaya tambah keren gitu :)

    ReplyDelete
  5. Wah, nambah ilmu banget. ctrl+d dulu deh.

    ReplyDelete
  6. mantap gan,dapat ilmu baru nih....

    ReplyDelete
  7. Waduh-waduh scriptnya banyak banget gan, agag pusing bacay hehe

    ReplyDelete
    Replies
    1. Iya Gan...
      Klo gitu jgn dibaca scriptnya...baca tutorialnya aja....

      Delete
  8. Makasih mas ilmunya sudah dibagi.

    ReplyDelete
    Replies
    1. Sama-sama Mas...
      Semoga bermanfaat...

      Delete
  9. jadi makin sexy nati blog saya kalau pakai ini

    ReplyDelete
  10. mantap ini lumayan buat nambah elemen halaman biar gk keliatan kaku. Thanks gan :D

    ReplyDelete
    Replies
    1. Lumayan uat mempercantik atau mempertampan tampilan blog...

      Delete
  11. Kayaknya lebih cocok buat blog tutorial kalau tombolnya satu saja gimana mas? misalnya buat download ebook kan nggak ada demonya

    ReplyDelete
    Replies
    1. Hapus aja kode ini Mas...

      <a class="button button-purple" href="LINK" target="_blank">
      <i class="fa fa-rocket"></i> Live <strong>Demo</strong>
      </a>

      Delete
  12. mantep ini kang, sangat pas nantik kalo sudah ada info download langsung saya ke tkp kang :)

    ReplyDelete
    Replies
    1. Sekarang aja mas Muklis..knapa harus tunggu nanti..haha

      Delete
    2. Bener tuch kata Mas Sonny...

      Delete
    3. hahaha, saya amankan dulu aja mas, tapi jangan diperiksa ya :)

      Delete
    4. Yang rapih simpennya Mas....
      Takut digondol maling...

      Delete
  13. keren2 buttonnya, langsung ctrl+D dulu mas. buat dipelajari lagi :D

    ReplyDelete
    Replies
    1. Silahkan Mas Indra...lumayan buat koleksi

      Delete
  14. gampang juga yah kang,, tapi kalau diaksesnya dari web browser hp masih bagus gak yah ??? , terus kalau semisal diterapin di web biasa bukan blog,,gimana ? apa kita hanya cukup ngelink ke file cssnya aja ?? terus tinggal mangil file css tersebut dari halaman HTML/PHP ?
    Ok kang makasih.. izin mengamnkan dulu... hehehe

    ReplyDelete
    Replies
    1. Iya...Mas...
      Masih tetap bagus kok,,,kan di buat responsive...
      Ini bisa diterapin di platform apapun Mas...
      CSS upload juga bisa...yang penting class pada htmlnya sama...

      Delete
  15. Mantap mas, ini yang lagi saya cari dan butuhkan, makasih mas, saya save dulu ya.

    ReplyDelete
    Replies
    1. Iya Mas...
      Silahkan dipakai sesuka hati...

      Delete
  16. sangat cocok ini buat yang suka berbagi seperti download ya kang, atau sejenisnya, isin saya amankan caranya ya kang :)

    ReplyDelete
    Replies
    1. betul betul betul, silahkan diamankan, besok saya tes

      Delete
  17. Keren gan, bener juga kata agan Cara Bimbingan di atas, cocok untuk blog download, thanks gan

    ReplyDelete
  18. Hasilnya cantik mas ya...selama ini saya belum kepikir cara buat life demo atau tombol download yang cantik imut....rupanya ada disini toh turorialnya...

    ReplyDelete
  19. Oh caranya ternyata sangat mudah. Dan aku sudah memasang Font-Awesome sudah lama. Tapi itu pun hanya untuk icon laman menu. Ternyata bisa untuk membuat tombol donwload atau demo. keren habis.

    ReplyDelete
  20. wah keren CSS nya, kirain ini gambar.

    ReplyDelete
  21. bagus juga hasilnya hab dan colorfull. apalagi kalau memakai warna flat ui.

    ReplyDelete
    Replies
    1. Iya Mas...
      Tinggal di modifikasi aja CSS-nya...

      Delete
  22. Assalamualaikum.wr.wb. Keren banget bro tutorialnya.. Anyway saya pengen tahu, ada nggak tutorial ngebuat Background Title di blog ini? Keren banget ada jaring-jaringnya gitu.. Kalau ada tolong share donk..

    ReplyDelete
    Replies
    1. Waalaikumussalam...
      Thank's Mas...
      Oh itu header blog Mas... Liat aja di http://www.wahabsaputra.com/p/about-me.html dibagian komentar

      Delete

Jangan titip link.....saya pasti berkunjung balik....
Beri tahu saya di kotak komentar kalau sobat sudah Follow Blog ini, agar saya bisa segera Folback dan tidak ketinggalan Update artikel dari blog sobat...!!!