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