Cara buat tombol download keren di blog

   Membuat tombol download maupun tombol demo ataupun yang lainya, tetap saja di namakan "tombol" hanya saja untuk kepergunaanya tombol ini harus tepat jika di beri link untuk download maka di namakan tombol downlod, jika di berikan link demo maka namanya tombol demo bahkan sering kali tombol ini di berikan untuk menuju ke halaman lain, untuk membuat button atau tombol ini caranya sangatlah mudah kita hanya perlu meletakan kode CSS terlebih dahulu ke dalam template blog yang kita miliki, berikut caranya.

Membuat tombol download/link keren di blogspot responsive

• Buka akun blogger yang kita miliki
• pilih tema untuk menempatkan kode CSS
• silahkan pilih mode html pada tema tersebut
• kemudian copy kode yang saya berikan di bawah ini.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.buttons {
    margin: 10%;
    text-align: center;
}

.btn-hover {
    width: 200px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}

.btn-hover.color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-hover.color-2 {
    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-3 {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-hover.color-4 {
    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-hover.color-5 {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-hover.color-6 {
    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
    box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.btn-hover.color-7 {
    background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
    box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-hover.color-8 {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-hover.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-10 {
        background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-hover.color-11 {
       background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}

• Cari kode  ]]></b:skin> dengan menggunakan tombol ctrl+f agar lebih mudah, dan letakan tepat di atas kode tersebut.

• kemudian save/simpan.

   Cara membuat tombol keren di blog

   Untuk mempergunakan tombol yang akan kita pergunakan maka kita harus memanggil kode tersebut dengan meletakan kode di bawah ini untuk memanggil tombol link yang akan di kita buat kemudian simpan/save dan lihat hasilnya :

Di bawah ini contoh hasil dari 11 tombol yang masrodi buat.

 <button class="btn-hover color-1">Tombol 1</button>

 <button class="btn-hover color-2">Tombol 2</button>

 <button class="btn-hover color-3">Tombol 3</button>

 <button class="btn-hover color-4">Tombol 4</button>

 <button class="btn-hover color-5">Tombol 5</button>

 <button class="btn-hover color-6">Tombol 6</button>

 <button class="btn-hover color-7">Tombol 7</button>

 <button class="btn-hover color-8">Tombol 8</button>

 <button class="btn-hover color-9">Tombol 9</button>

 <button class="btn-hover color-10">Tombol 10</button>

 <button class="btn-hover color-11">Tombol 11</button>

Untuk penempatan link download atau link lainya bisa di tempatkan dengan struktur seperti contoh di bawah ini untuk pemanggilanya :

<a href="https://www.masrodi.com/search/label/Blogging"><button class="btn-hover color-1">Demo</button></a>

Ganti link yang masrodi beri warna merah dengan link yang sobat inginkan emudian simpan maka hasilnya :

    Untuk mengganti model tombol yang kita suka, kita hanya perlu mengganti tulisan yang berwarna kuning "color-1" dengan model yang lainya.

    Untuk sementara hanya itu yang dapat masrodi berikan tentang cara membuat tombol keren, semoga saja tombol yang saya bagikan ini memang benar-benar keren, terima kasih.

Lokasi:

Berbagi :