Cara Cepat Membuat Sexy Buttons Pure CSS Update Terbaru

Sedikit Info Seputar Membuat Sexy Buttons Pure CSS Terbaru 2017 - Hay gaes kali ini team Android Media, kali ini akan membahas artikel dengan judul Membuat Sexy Buttons Pure CSS, kami selaku Team Android Media telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Media. semoga isi postingan tentang Artikel Buttons, Artikel Coding, Artikel Tutorial Blogspot, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Membuat Sexy Buttons Pure CSS Terbaru
link: Membuat Sexy Buttons Pure CSS

Berbagi Membuat Sexy Buttons Pure CSS Terbaru dan Terlengkap 2017

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 :

Download Live Demo

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...

Itulah sedikit Artikel Membuat Sexy Buttons Pure CSS terbaru dari kami

Semoga artikel Membuat Sexy Buttons Pure CSS yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Android Media. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Membuat Sexy Buttons Pure CSS