Membuat Tombol Download Dengan CSS Pseudo

Membuat Tombol Download Dengan CSS Pseudo - Terinspirasi dari banyaknya blog yang saat ini membahas tema tentang aplikasi download, blog share game dengan nice download software dan masih banyak lagi, dan semua itu sudah pasti disana terdapat tombol dengan link teks "DOWNLOAD", mungkin dengan sedikit membuat tombol tersebut sedikit cantik dan elegan akan dapat menarik pengunjung untuk meng-klik tombol tersebut.

Pada pembahasan yang sama, diartikel sebelumnya saya pernah mendesain tampilan tombol seperti ini dengan efek 3D, namun kali ini sahabat Anda SAHABAT BLOGGER 77 akan memberikan efek baru dengan membuat tombol download menggunakan elemen CSS Pseudo seperti tampilan gambar dibawah ini

Tombol efek 3D - Membuat Tombol 3 Dimensi Dengan CSS


CSS berikut sudah saya desain dengan kode color-stop, sedangkan pada link teks saya menggunakan 2 categori yaitu pada link active saya menggunakan elemen CSS Pseudo background-image: linear-gradient. Dan pada link active:before saya hanya menggunakan efek box-shadow dengan value color inset, sehingga Anda akan lebih mudah untuk membuat tampilan tombol dengan warna yang berbeda saat active dan saat tombol di-klik. Jika Anda bingung menggunakan CSS box-shadow, Anda boleh pelajari pada artikel saya sebelumnya tentang Mengenal CSS Dasar Box Shadow


Pada dahsboard pilih TEMPLATE-Edit template, lalu letakkan CSS berikut diatas atau sebelum kode ]]></b:skin>

.a_sahabatblogger77 {
   background-color:#3bb3e0;
   font-family: 'Open Sans', sans-serif;
   font-size:16px;
   font-weight:bold;
   text-decoration:none;
   color:#fff;
   position:relative;
   padding:10px 20px;
   padding-right:50px;
   background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(44,160,202)),
   color-stop(1, rgb(62,184,229)));
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   box-shadow: inset 0px 1px 0px #2ab7ec,
                     0px 5px 0px 0px #156785,
                     0px 10px 5px #999;}

.a_sahabatblogger77:active {
   top:3px;
   background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(62,184,229)),
   color-stop(1, rgb(44,160,202)));
   box-shadow: inset 0px 1px 0px #2ab7ec,
                     0px 2px 0px 0px #156785,
                     0px 5px 3px #999;}

.a_sahabatblogger77::before {
   background-color:blue;
   background-image:url(...URL-Gambar Panah.png);
   background-repeat:no-repeat;
   background-position:center center;
   content:"";
   width:20px;
   height:20px;
   position:absolute;
   right:15px;
   top:50%;
   margin-top:-9px;
   border-radius: 50%;
   box-shadow: inset 0px 1px 0px #052756,
                     0px 1px 0px #60c9f0;}

.a_sahabatblogger77:active::before {
   top:50%;
   margin-top:-12px;
   box-shadow: inset 0px 1px 0px #60c9f0,
                     0px 3px 0px #0e3871,
                     0px 6px 3px #1a80a6;}

Tahap selanjutnya, copy lalu Paste kode HTML berikut pada postingan Anda mode HTML (bukan Compose)

<a class="a_sahabatblogger77" href="/">DOWNLOAD</a>

Maka hasilnya akan seperti tombol DEMO SHOW dibawah ini




DEMO SHOW


Bagaimana, mudah bukan..!! hehe
Semoga informasi dalam tutorial ini dapat memberikan Anda inspirasi. Happy blogging.!