Cara buat Demo dan Download seperti Arlina Design


Kali kita akan berbagi tutorial - Cara buat tombol demo dan download seperti Arlina Design, tombol ini juga bagus buat design blog kalian biar terlihat lebih rapih dah responsive.

Cara membuat demo dan download

  • Masuk ke Blogger
  • Pilih Template > Edit HTML, Lalu cari kode </head>
  • Kemudian salin kode di bawah ini, tempat di atas kode tadi
 <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> 
  • Salin kode di bawah ini, Lalu pilih 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> 
  • Lalu Simpan
Silakan ganti warna merah dengan alamat url kalian

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel