Cara Membuat Hover Button Keren
Cara Membuat Hover Button Keren
Hai kawan-kawan luacode.....
Kali ini luacode akan membagikan cara membuat button hover keren hanya dengan HTML dan CSS saja....
Ini adalah contoh berbagai hover button yang akan luacode bagikan caranya...
Mari kawan-kawan langsung saja luacode mulai
Cara Membuat Button Hover Keren
Membuat Tag button dan CSS
Sebelum membuat button-nya sebaiknya kawan-kawan membuat wrap untuk mengemas beberapa button yang kita akan buat terlebih dahulu...
Ikuti code dibawah ini....
HTMl CSS
| 1 | <html> |
| 2 | <head> |
| 3 | </head> |
| 4 | <style> |
| 5 | .box{ |
| 6 | background-color: seagreen; |
| 7 | margin: 10px auto; |
| 8 | padding: 10px; |
| 9 | height: 400px; |
| 10 | width: 400px; |
| 11 | } |
| 12 | </style> |
| 13 | <body> |
| 14 | <div class="box"></div> |
| 15 | </body> |
| 16 | </html> |
Dimulai dengan membuat tag button didalam box yang tadi kawan-kawan buat, yang memiliki class "btn-hover" dan id untuk masing-masing hovernya
Ikuti code dibawah ini.....
HTMl
| 1 | <div class="box"> |
| 2 | <button class="btn-hover">horizontal</button> |
| 3 | <button class="btn-hover">vertikal</button> |
| 4 | <button class="btn-hover">diagonal</button> |
| 5 | <button class="btn-hover">shadow</button> |
| 6 | </div> |
Lalu waktunya kawan-kawan membuat CSS dari class "btn-hover"
Ikuti code dibawah ini.....
CSS
| 1 | <style> |
| 2 | .btn-hover{ |
| 3 | border: 3px solid lightblue; |
| 4 | background-color: transparent; |
| 5 | margin: 20px auto; |
| 6 | overflow: hidden; |
| 7 | position: relative; |
| 8 | display: block; |
| 9 | width: 150px; |
| 10 | height: 60px; |
| 11 | color: white; |
| 12 | } |
| 13 | </style> |
Jika semua langkah-langkah yang diatas sudah diikuti akan menjadi seperti ini
Nah diatas tadi kawan-kawan luacode sudah menyiapkan beberapa button yang akan kawan-kawan kasih hover
sekarang kita akan membuat CSS untuk hover dari button diatas
pertama tambahkan attribute id disetiap button
masukan attribute id seperti kode dibawah ini.....
HTML
| 1 | <button class="btn-hover" id="horizontal">Horizontal</button> |
| 2 | <button class="btn-hover" id="vertikal">Vertikal</button> |
| 3 | <button class="btn-hover" id="diagonal">Diagonal</button> |
| 4 | <button class="btn-hover" id="shadow">Shadow</button> |
cara membuat hover keren
1. Hover Horizontal
CSS
| 1 | #horizontal::after{ |
| 2 | background-color: orange; |
| 3 | tansition: 1s all ease; |
| 4 | position: absolute; |
| 5 | height: 100%; |
| 6 | content: ""; |
| 7 | width: 0; |
| 8 | left: 0; |
| 9 | top: 0; |
| 10 | } |
| 11 | #horizontal:hover::after{ |
| 12 | width: 100%; |
| 13 | } |
2. Hover Vertikal
CSS
| 1 | #vertikal::after{ |
| 2 | background-color: yellow; |
| 3 | transition: 1s all ease; |
| 4 | position: absolute; |
| 5 | width: 100%; |
| 6 | content: ""; |
| 7 | height: 0; |
| 8 | left: 0; |
| 9 | top: 0; |
| 10 | } |
| 11 | #vertikal:hover::after{ |
| 12 | height; |
| 13 | } |
3. Hover Diagonal
CSS
| 1 | #diagonal::after{ |
| 2 | background-color: lightseagreen; |
| 3 | transform: rotate(15deg); |
| 4 | transition: 1s all ease; |
| 5 | position: absolute; |
| 6 | height: 165%; |
| 7 | width: 110%; |
| 8 | left: -165px; |
| 9 | content: ""; |
| 10 | top: -60px; |
| 11 | } |
| 12 | #diagonal:hover::after{ |
| 13 | top: -18px; |
| 14 | left: -8px; |
| 15 | } |
4. Hover Shadow
CSS
| 1 | #shadow{ |
| 2 | transition: 1s all ease; |
| 3 | overflow: unset; |
| 4 | z-index: 1; |
| 5 | } |
| 6 | #shadow::after{ |
| 7 | border: 3px solid yellow; |
| 8 | transition: 1s all ease; |
| 9 | position: absolute; |
| 10 | height: 100%; |
| 11 | width: 100%; |
| 12 | content: ""; |
| 13 | z-index: -1; |
| 14 | opacity: 0; |
| 15 | left: 0; |
| 16 | top: 0; |
| 17 | } |
| 18 | #shadow::before{ |
| 19 | transition: 1s all ease; |
| 20 | border: 3px solid red; |
| 21 | position: absolute; |
| 22 | height: 100%; |
| 23 | width: 100%; |
| 24 | content: ""; |
| 25 | z-index: -2; |
| 26 | opacity: 0; |
| 27 | left: 0; |
| 28 | top: 0; |
| 29 | } |
| 30 | #shadow:hover::after{ |
| 31 | opacity: 100; |
| 32 | left: 2px; |
| 33 | top: 2px; |
| 34 | } |
| 35 | #shadow:hover::before{ |
| 36 | opacity: 100; |
| 37 | left: 8px; |
| 38 | top: 8px; |
| 39 | } |
| 40 | #shadow:hover{ |
| 41 | padding: 8px 0 0 8px; |
| 42 | } |
Sekian dari luacode....
Semoga Bermanfaat
0 Response to "Cara Membuat Hover Button Keren"
Post a Comment