-->

Cara Membuat Slide Demo dan Download Button Ala Arlina Design

Cara Membuat Slide Demo dan Download Button Ala Arlina Design
Thursday, October 10, 2019
Cara Membuat Slide Demo dan Download Button Ala Arlina Design

Memasang Slide Demo dan Download Button - Hai teman - teman, pada kesempatan kali ini saya akan membagikan sedikit tutorial singkat Cara Memasang Tombol Demo dan Download Dengan Efek Slide.

Tutorial ini sebetulnya terinspirasi dari salah satu blogger yang cukup terkenal di kalangan blogger, dan mungkin kalian semua para blogger juga mengenal nya.

Oke tidak usah berlama - lama lagi, langsung saja kita ke pembahasan utama nya, bisa langsung kalian simak dalam artikel berikut ini.
Note: Sebelumnya kalian harus memasang font awesome pada blog kalian terlebih dahulu
1. Buka Blogger > Tema > Edit Html dan Pasang kode di bawah ini, sebelum </style> atau ]]></b:skin>

#wrap {
margin: 20px auto;
text-align: center;
}

#wrap br {
display: none;
}

.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}

.btn-slide2 {
border: 2px solid #efa666;
}

.btn-slide:hover {
background-color: #0099cc;
}

.btn-slide2:hover {
background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}

.btn-slide2:hover span.circle2 {
color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}

.btn-slide2 span.circle2 {
background-color: #efa666;
}

.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}

.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}

Simpan Tema/Template

2. Selanjut nya, kalian masukan kode pemanggil di tab menu HTML saat ingin membuat artikel

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
Setelah itu save, dan Selesai.

Preview Demo


Nah, berikut adalah artikel pembahasan mengenai cara pemasang Tombol butto Download dan Demo dengan efek slide ala Arline Design. Selamat mencoba dan semoga bermanfaat

Sumber Code: Arlinadzgn

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Slide Demo dan Download Button Ala Arlina Design"

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel