25.4.14
10
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


Button image


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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Tombol Download Dengan CSS Pseudo
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

10 komentar

  1. ini cocok banget nih buat yang sering ngasih donlotan, jadi lebih cantik, hehehe...

    BalasHapus
    Balasan
    1. biasanya akan lebih bermanfaat jika mreka yang sisipkan link dengan tombol ini dengan iklan klik, jadi lihat tombolnya pengunjung akan penasaran akan meng-kliknya..hehe

      Hapus
    2. tapi kalo GA kayaknya ga boleh yia bos...

      Hapus
    3. tampilan gambar mungkin tidak disarankan untuk kita edit bos, tetapi kita bisa tambahkan beberapa teks yang mengarah pada iklan tersebut, dan saya rasa itu sah-sah saja,

      Hapus
  2. selamat pagi mbak devy,,_
    dengan adanya tampilan 'DOWNLOAD' yang pasti akan memanjakan pembaca untuk mendownload ya mbak,,_
    downloadnya 'oplosan',,_

    BalasHapus
  3. ini bagus sekali mbk, sayangnya blog saya tidak memuat tentang download. terima kasih mbk..

    BalasHapus
  4. bagus nih mbak tombol downloadnya jadi lebih menarik

    BalasHapus
  5. Ini wajib coba buat yang blognya tentang download

    BalasHapus
  6. keren sob... wahhh kalau ente sudah bisa CSS gini pasti entar lagi ente akan mengalih ke BLOGAZINE deh.... :)

    BalasHapus
  7. wah keren nih artikel alias tutorial, mau coba bikin juga nih. ijin kopas scriptnya ya....

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK