√ √ Cara Membuat Tombol Demo Dan Download Keren Gradian Ala Arlina

√ Cara Membuat Tombol Demo Dan Download Keren Gradian Ala Arlina

Posted by New's

Wednesday, December 23, 2020

syugulnajeh - Kamu pasti tahukan blog terpopuler di indonesia milik mba arlina? Salah satu blog impian para blogger lainnya. Kenapa bisa menjadi impian para blogger? Ada beberapa alasan kenapa orang-orang mengininkan desain blog seperti mba arlina ini. Salah satunya desain blog yang terlihat cantik dan elegan.

Salah satu yang membuat tampilan blognya menjadi terlihat cantik adalah dengan adanya tombol demo dan download yang elegan. Kalau kamu pernah mengunjungi blognya, pasti kamu sudah tahu bagaimana bentuk dan desain tombol demo dan downloadnya.

Tombol demo ini memiliki bentuk yang beragam namun identik dengan gradian. Ada tombol yang berbentuk bulat dan ada juga yang berbentuk kotak.

Untuk bisa memasang tombol yang mirip seperti mba arlina ini cukup mudah kok. Kamu tidak perlu belajar program dulu untuk bisa memasang tombol ini. Hanya perlu mengikuti langkah-langkah didalam artikel ini, kamu sudah bisa memasang tombol demo yang cantik seperti arlinadzgn.com ini.

Tanpa lama-lama kita langsung aja ke tutorial cara membuat tombol demo dan download ala arlina. Simak baik-baik!

Cara Membuat Dan Memasang Tombol Demo & Download Keren Seperti Arlina

1. Masuk ke Dashbord blogger kamu.

2. Kemudian masuk ke menu Theme --> Edit HTML.

3. Lalu masukan atau pastekan kode CSS dibawah ini tepat diatas </head>.

<style type="text/css">
/* buttom by paseo design */
body{
  font-family: Arial, Helvetica, sans-serif;
  margin:0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 50vw;
  margin: 0 auto;
  min-height: 0vh;
}
.btn {
  flex: 1 1 auto;
  margin: 8px;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.15s;
  background-size: 400% auto;
  color: white;
 /* text-shadow: 0px 0px 0px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 20px #eee;
  border-radius: 3px;
  text-decoration: none;
 }
 
.btn:hover {
  background-position: right center; /* change the direction of the change here */
}

.gradien-paseo{
  background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

/* Magic End*/
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

4. Kemudian simpan temanya. Sampai disini kamu sudah berhasil memasukan kode demonya. Dan untuk pemasangan tombol demonya didalam postingan, masuk ke postingan kamu dan pastekan kode pemanggil ini kedalam mode HTML (bukan Compose).

<div class="container">
  <a href="#" class="btn gradien-paseo">Demo</a>
</div>
<div class="container">
  <a href="#" class="btn gradien-paseo">Download</a>
</div>

Silahkan ganti pada elemen href dengan link tujuan. Dan kalau mau buat lebih dari dua tombol, tambahkan saja elemen tag <a href="......" hingga </a> kedalam tag </div>.

Jika semuanya sudah publikasikan postingannya dan lihat hasilnya.