Cara Membuat Tombol Demo Dan Download Seperti di Arlina Design

Bagi kamu yang selama ini penasaran untuk membuat tombol seperti di blog Arlina Design, mungkin dalam artikel ini apa yang selama ini kamu cari dan tanyakan akan terjawab.

Membuat tombol demo dan download 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 dibawah ini dapat kamu ubah dengan nama yang kamu 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 dibawah ini dan letakkan di atas kode </head>

<style type="text/css">
/* button by tuan siput */
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-tuansiput{
  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-tuansiput">Demo</a>
</div>
<div class="container">
  <a href="#" class="btn gradien-tuansiput">Download</a>
</div> 


Kode diatas tidak selamanya harus Demo dan Download. Kamu bisa menggantinya dengan berbagai macam nama yang kamu sukai.

sumber: paseodzgn

0 Response to "Cara Membuat Tombol Demo Dan Download Seperti di Arlina Design"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel