Cara Membuat Tombol Download CSS - Zalvaker

    Social Items

Tampilan Blog memang sangat berpengaruh bagi sebagian pengunjung blog tersebut. terutama pada saat mereka ingin mendownload sesuatu dari blog itu. sebagian blogger menggunakan gambar Download atau hanya tulisan Download Disini.


Tapi itu semua kurang menarik dan tidak sedap dipandang. adapun menggunakan gambar yang sewaktu waktu gambar tersebut dapat hilang dari server dan akhirnya hanya tersisa gambar putih yang kosong.

Berhubungan dengan itu disini ane mau membahas cara membuat tombol download dengan CSS. Apa Itu CSS..?? css merupakan sebuah script untuk mengatur tata letak dan tampilan suatu website atau blog.

Tanpa Berlama Lama langsung ane mulai

1. Pasang Script di bawah

Bisa Dipasang Pada Awal Postingan atau pasang template langsung, Diatas code </head> 
<style type='text/css'>
.anim
{
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}

.contoh-tombol
{
    position: relative;
    padding: 10px 80px;
  margin: 0px 10px 10px 0px;
  float: left;
    border-radius: 10px;
    font-family: cursive;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;

}

.contoh-tombol:active
{
    transform: translate(0px,4px);
  -webkit-transform: translate(0px,4px);
    border-bottom: 1px solid;
}

</style>

2. Untuk Membuat Tombol Gunakan Script

<span href="#" class="contoh-tombol anim">Download</span>
Ganti Tulisan Download Sesuai kebutuhan.

3. Hasil


Download


4. Tambahan

Jika ingin lebih menarik atau unik ganti CSSnya Sesuai keperluan
.contoh-tombol
{
    position: relative;
    padding: 10px 80px;
  margin: 0px 10px 10px 0px;
  float: left;
    border-radius: 10px;
    font-family: cursive;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;

}

Memang tidak sebagus dari template lain tapi mungkin bisa menambah wawasan ente tentang blogger, sekian dari ane, semoga Bermanfaat.

Cara Membuat Tombol Download CSS

Zalvaker
Tampilan Blog memang sangat berpengaruh bagi sebagian pengunjung blog tersebut. terutama pada saat mereka ingin mendownload sesuatu dari blog itu. sebagian blogger menggunakan gambar Download atau hanya tulisan Download Disini.


Tapi itu semua kurang menarik dan tidak sedap dipandang. adapun menggunakan gambar yang sewaktu waktu gambar tersebut dapat hilang dari server dan akhirnya hanya tersisa gambar putih yang kosong.

Berhubungan dengan itu disini ane mau membahas cara membuat tombol download dengan CSS. Apa Itu CSS..?? css merupakan sebuah script untuk mengatur tata letak dan tampilan suatu website atau blog.

Tanpa Berlama Lama langsung ane mulai

1. Pasang Script di bawah

Bisa Dipasang Pada Awal Postingan atau pasang template langsung, Diatas code </head> 
<style type='text/css'>
.anim
{
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}

.contoh-tombol
{
    position: relative;
    padding: 10px 80px;
  margin: 0px 10px 10px 0px;
  float: left;
    border-radius: 10px;
    font-family: cursive;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;

}

.contoh-tombol:active
{
    transform: translate(0px,4px);
  -webkit-transform: translate(0px,4px);
    border-bottom: 1px solid;
}

</style>

2. Untuk Membuat Tombol Gunakan Script

<span href="#" class="contoh-tombol anim">Download</span>
Ganti Tulisan Download Sesuai kebutuhan.

3. Hasil


Download


4. Tambahan

Jika ingin lebih menarik atau unik ganti CSSnya Sesuai keperluan
.contoh-tombol
{
    position: relative;
    padding: 10px 80px;
  margin: 0px 10px 10px 0px;
  float: left;
    border-radius: 10px;
    font-family: cursive;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;

}

Memang tidak sebagus dari template lain tapi mungkin bisa menambah wawasan ente tentang blogger, sekian dari ane, semoga Bermanfaat.
Load comments

Tidak ada komentar