Cara Membuat Tombol Demo dan Download Seperti Arlina Design

Cara Membuat Tombol Demo dan Download Seperti Arlina Design
Bagi Anda yang selama ini penasaran tentang cara membuat tombol demo dan download seperti Arlina Design, mungkin dalam artikel ini apa yang selama ini Anda cari dan tanyakan akan terjawab.

Membuat tombol download dan demo tentu saja akan memudahkan pengunjung dalam mengetahui dimana link diletakkan.

Untuk membuat demo dan download tidak selamanya menggunakan cara yang sama, karena ada begitu banyak cara yang bisa dilakukan dengan hasil serta desain yang tentu saja berbeda-beda.

Meskipun berbeda tapi tujuan serta fungsi tombol demo dan download tentu saja sama.

Tidak hanya tombol demo dan download saja, tombol di bawah ini dapat Anda ubah dengan nama yang Anda inginkan serta dapat dibuat banyak dalam satu postingan.

Membuat Tombol Demo Dan Download Seperti di Arlina Design


Pertama masuk ke "Blogger" > pilih menu "Tema" > klik "Edit HTML".

Copy kode di bawah ini dan letakkan di atas kode </head>

<style type="text/css">
/* button by tikus males */
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-tikusmales{
  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> 

Untuk memasang tombol, maka masuk ke menu "Postingan" > klik Entri baru.

Copy kode berikut dan masukan ke dalam "Tab HTML" bukan (compose)

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

Kode di atas tidak selamanya harus Demo dan Download. Anda bisa menggantinya dengan berbagai macam nama yang Anda sukai.
Tulis Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel