Membuat Animasi Button Menggunakan VueJS

Hallo semua, dalam kesempatan ini saya ingin membagikan tutorial tentang Cara Membuat Animasi Button Menggunakan VueJS. Animasi button ini sedikit saya custom dengan tambahkan switch atau dengan cara memilih satu option yang disediakan. Jadi Animasi button nanti yang akan ditampilkan sesuai urutan option yang dipilih.

Baiklah langsung saja kita membuat Animasi Button Menggunakan VueJs seperti contoh berikut:

Silahkan sahabat buka text editor kemudian ketikkan code dibawah ini:

<div id="Myapp">
	  <select v-model="select_id"  name="switch_id" id="switch_id">
	    <option v-for="btn_hov in btn_id" :value="btn_hov">{{btn_hov}}</option>
	  </select> 
	  <button :id="select_id">Hover</button>
</div>

pada code diatas adalah struktur yang digunakan seperti tag select option yang nanti digunakan untuk option pilihan, kemudian button yang akan menampilkan animasi efek hover

Selanjutnya menambahkan script seperti dibawah ini:

<script>
new Vue({
  data(){
    return{
      button_id:[
        'one',
        'two',
        'three'
        ],
      select_id:'one'
    }
  }
}).$mount('#Myapp')
	</script>

Jadi script dari javascript diatas berisi data untuk isi dari select option.

Langkah selanjutnya yaitu tentu saja style CSS untuk menampilkan Animasi efek hover seperti berikut:

button{
  width: 150px;
  height: 80px;
  color: #060606;
  border: none;
  background-color: transparent;
  margin: 20px;
  cursor: pointer;
  font-size: 1.5em;
  font-weight: bold;
}
#one{
  border: 5px dashed #0bf107;
  position: relative;
  transition-duration: 0.3s;
  transition:cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
#one:hover{
  color: #ffffff;
  background-color: #6e00ff;
}
#one::after{
  content: '';
  position:absolute;
  width: 0%;
  height: 0%;
  background-color: #ff0202;
  top:0;
  right:0;
  transition: 0.4s;
  z-index: -1;
}
#one::before{
  content: '';
  position:absolute;
  width: 0%;
  height: 0%;
  background-color: #00f3ff;
  bottom:0;
  left:0;
  transition: 0.4s;
  z-index: -1;
}
#one:hover::after,
#one:hover::before{
  width: 100%;
  height: 100%;
}

#two{
  position: relative;
  transition:cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition-duration: 0.2s;
}
#two::after{
  content:'';
  position:absolute;
  background-color: #da9700;
  width: 3%;
  height: 100%;
  right: 0;
  top: 0;
  transition:cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition-duration: 0.3s;
  z-index: -1;
}
#two:hover{
  color: #fff;
}

#two:hover::after{
  width:100%;
}
#three{
  position: relative;
  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.3s;
}

#three::after{
  content: '';
  position: absolute;
  background-color: #ec07d0;
  width: 0%;
  height: 0%;
  top:45%;
  left: 45%;
  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 0.3s;
  z-index: -1;
  border-radius:25%;
}
#three:hover::after{
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  border-radius: 0;
}
#three:hover{
  color: #ffffff;
}

Apabila sudah simpan semua code diatas kemudian langsung buka pada browser masing-masing, jangan lupa pilih option untuk melihat hasil animasinya.

Saya kira cukup dalam pembahasan artikel ini mengenai Cara Membuat Animasi Button Menggunakan VueJS, semoga bermanfaat dan sampai jumpa dilain kesempatan.

terima kasih

The post Membuat Animasi Button Menggunakan VueJS appeared first on Kursus Website Terbaik.