Cara Membuat Hover Button Keren dengan CSS3

Efek hover memang sangat familiar bagi kita, dengan menggunakan efek ini kita bisa kreasikan element apapun menjadi sebuah efek yang sangat menarik, jika kalian ingin membuat sebuah hover dan masih bingung ingin membuat efek hover, berikut ini akan saya bagikan referensi efek hover pada sebuah button HTML. Simak tutorial Cara Membuat Hover Button Keren dengan CSS3 dibawah ini.Baiklah langsung saja kita mulai dengan langkah pertama, yakni kita akan buat satu buah button dengan sintak HTML berikut ini.

<body>
	<a href="" class="button">My Hover</a>
</body>

Untuk button nya kalian bisa membuat beberapa buah element button, kemudian setelah sintak HTML button kalian ketikan, selanjutnya kita akan desain dan membuat efek hover pada button dengan sintak CSS3 berikut ini.

@import url('https://fonts.googleapis.com/css?family=Kumar+One');

html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background: #FFF;
    font-size: 62.5%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body {
    background-color: #FFF;
    color: #45555F;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 160%;
    font-family: 'Kumar One', cursive;
}

a{
  text-decoration: none;
  display: block;
}

.button{
  color: #222;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  letter-spacing: .2em;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-size: 0.875em;
  width: 140px;
  text-align: center;
  padding: 10px 15px;
}

.button:hover{
  letter-spacing: 0;
  color: white
}

.button:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #6284FF;
  z-index: -1;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.button:hover:after{
  height: 100%;
}

Pada sintak berikut, kalian bisa modifikasi efek hover menjadi sedemikian rupa agar semakin menarik untuk dilihat.

.button:hover{
  letter-spacing: 0;
  color: white
}

.button:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #6284FF;
  z-index: -1;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.button:hover:after{
  height: 100%;
}

Pada bagian sintak ini kalian bisa kreasikan button dengan mengubah atau menambah warna, ukuran dan yang lain nya sesuai keinginan. Setelah semua sintak HTML dan CSS3 diatas kalian ketikan, langkah terakhir simpan file nya kemudian buka pada browser masing-masing dan lihat hasilnya.

Baik cukup sekian tutorial mengenai bagaimana Cara Membuat Hover Button Keren dengan CSS3, semoga bermanfaat 🙂

Untuk lebih jelasnya, kalian bisa lihat tutorial diatas pada link demo dibawah ini.

DEMO

Cara Membuat Hover Button Keren dengan CSS3

Kategori