Tombol Download

Kali ini coba share cara membuat download Button. Dibawah ini contoh dari kode script HTMLtombol down dengan kode :


tinggal sesuaikan linknya yang di kasih warna merah dan nama tombol dari yang berwarna biru. jangan lupa masukan di mode HTML jangan Compose.

Generator link download

Seperti anda lihat, rasanya kurang menarik tampilannya, Nah untuk mempercantiknya tinggal gunakan CSS, untuk tampilannya sesuaikan dengan selera sobat. Dibawah ini contoh tombol yang mirip dengan tombol Google dan sedikit perubahan warna

Blue Google Button

Orange Google Button

Nah untuk kode CSS silakan cari za yang sesuai selera, banyak ko tinggal ketik di google. atau kalau gak mau repot, silakan langsung pilih tombol diatas kemudian klik kanan pilih inspect, akan terbuka kode CSS dari tombol yang anda pilih tadi. contohnya

.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#f78d1d!important;background:0} .buttonx:active{position:relative;top:1px}

Warna Background bisa kalian ganti sendiri dengan keserasian template anda. tinggal Save Template. atau juga bisa pake kode yang ini dan paste langsung di html template di atas pada tag skin


/* CSS Button Style 2 by sikomengjadiarab */
a:link{text-decoration:none}
.vn-red a{
background-color:#e74c3c;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-red a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-red a:hover{
background:#7f8c8d
}

.vn-green a{
background-color:#27ae60;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-green a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-green a:hover{
background:#7f8c8d
}

.vn-wisteria a{
background-color:#8e44ad;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-wisteria a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-wisteria a:hover{
background:#7f8c8d
}

.vn-orange a{
background-color:#f39c12;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-orange a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-orange a:hover{
background:#7f8c8d
}

.vn-blue a{
background-color:#2980b9;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-blue a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-blue a:hover{
background:#7f8c8d
}

Share this post

Berlangganan update artikel terbaru via email: