20+ Hover effect for Button to be implemented in only CSS - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title 20+ Hover effect for Button to be implemented in only CSS, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article HTML, Article Tutorial, we write this you can understand. Well, happy reading.

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

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/

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

that is all articles 20+ Hover effect for Button to be implemented in only CSS This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article 20+ Hover effect for Button to be implemented in only CSS with the link address https://autopostingblogspot.blogspot.com/2014/03/20-hover-effect-for-button-to-be.html