20+ Hover effect for Button to be implemented in only CSS

Sebagai seorang bloglang (blogger petualang) sejati AA Koben menclok ke negeri matahari terbit Jepang. Gue mandapatkan artikel dengan judul "CSS nomi de jissō suru botan dezain ya hobāefekuto 20＋α" terjemah indonesia "20 + α hgaya over efek dan desain tombol untuk diterapkan hanya menggunakan CSS" Dengan hadirnya tools online untuk belajar kode CSS, memudahkan para user untuk berkreasi :)
Kode CSS berikut akan dikonfigurasi sebagai gaya dasar, seperti berikut ini, silakan membuat perubahan pada mereka sendiri, seperti ada atau tidaknya box-sizing dan ukuran tombol.
Markup HTML

<a class="button" href="#">Button</a>

Kode CSS

.button {
 width: 200px;
 height: 54px;
 outline: none;
 line-height: 54px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
}
.button::before, .button::after {
 z-index: -1;
 display: block;
 content: '';
 position: absolute;
}
.button, .button::before, .button::after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
}

Kode CSS tersebut merupakan kode dasar dari 20 gaya hover sebelum ditambahkan dengan kode lainnya! Jadi kode itu harus di pakai dalam setiap gaya yang akan menyertai ;))
Semua transition pada dasarnya: all .3s, Karena memiliki entri dalam bentuk, tempat yang ".3s" jika ingin mengubah bagian dari "all", kecepatan jika ingin menerapkan beberapa silahkan rubah untuk setiap masing-masing. Selain itu, nilai "linear" dan "ease-in-out" jika ingin mengubah kondisi perubahan.

1. Perubahan background color.

Ini adalah hal yang sederhana seperti mengubah warna latar belakang di latar belakang warna ketika hover.Button
.button {
background-color: #333;
color: #fff;
}
.button:hover {
background-color: #59b1eb;
}

2. Perubahan background color dengan border.

Button
.button {
background-color: #333;
border: 2px solid #333;
color: #fff;
line-height: 50px;
}
.button:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}

3. Warna latar belakang dibagi menjadi ke kanan dan ke kiri.

Button
.button {
position: relative;
z-index: 2;
background-color: #333;
border: 2px solid #333;
color: #fff;
line-height: 50px;
}
.button:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.button::before,
.button::after {
top: 0;
width: 50%;
height: 100%;
background-color: #333;
}
.button::before {
right: 0;
}
.button::after {
left: 0;
}
.button:hover::before,
.button:hover::after {
width: 0;
background-color: #59b1eb;
}

4. Warna latar belakang dibagi menjadi ke atas dan ke bawah.

Button
.button {
position: relative;
z-index: 2;
background-color: #333;
border: 2px solid #333;
color: #fff;
line-height: 50px;
}
.button:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.button::before,
.button::after {
left: 0;
width: 100%;
height: 50%;
background-color: #333;
}
.button::before {
top: 0;
}
.button::after {
bottom: 0;
}
.button:hover::before,
.button:hover::after {
height: 0;
background-color: #59b1eb;
}

5. Melebarkan spasi teks.

Button
.button {
background-color: #333;
color: #fff;
}
.button:hover {
letter-spacing: 5px;
}

6. Menampilkan blok di dalam.

Button
.button {
position: relative;
z-index: 2;
background-color: #fff;
border: 2px solid #333;
color: #333;
line-height: 48px;
}
.button::after {
top: 4px;
left: 4px;
width: 188px;
height: 42px;
border: 2px solid #333;
opacity: 0;
}
.button:hover::after {
opacity: 1;
}

7. Background color turun dari atas ke bawah.

Button
.button {
position: relative;
z-index: 2;
background-color: #fff;
border: 2px solid #333;
color: #333;
line-height: 50px;
overflow: hidden;
}
.button:hover {
color: #fff;
}
.button::after {
top: -100%;
width: 100%;
height: 100%;
}
.button:hover::after {
top: 0;
background-color: #333;
}Contohnya 7 saja yah, komplitnya silahkan kalian kunjungi ke www.nxworld.net/tips/css-only-button-design-and-hover-effects.html Kode banyak yg bentrok ternyata :D

Happy hover \m/