Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara Membuat Hover Zoom Out Dengan CSS3, begitu banyak variasi variasi hover pada CSS3 banyak sekali yang bisa kita gunakan berbagai jenis hover setiap website pasti menginginkan suatu hal yang baru ada di website nya, begitu juga dengan gaya hover yang semakin hari semakin banyak variasinya, nah kali ini saya berbgai tentang mempercantik hover agar tidak terlihat kaku, teman teman bisa salinkan scriptnya dibawah sini :
|
1 2 3 4 5 6 7 8 9 10 |
<style> .kotak {width: 400px; height: 200px; text-align: center; background: #5E8EFA; margin: auto; color: #fff; font-size: 20px; cursor: pointer;} .kotak p:hover {transform: scale(1.1); transition: transform 2s, background 2.4s, color 2.4s; color: #41EF76;} .kotak p {width: 200px; margin: auto; padding-top: 50px} </style> <body> <div class="kotak"> <p>Hallo I'm Ismet Maulana, i'm studying Website In Dumet School</p> </div> </body> |
Jika sudah teman teman save dan jalankan dibrowsernya , kemudian arahkan kursor pada text tampilannya, mudah yah sekarang hovernya tidak terlihat kaku dan masih banyak lagi variasi variasi hover, sampai disini artikel tentang Bagaimana Cara Membuat Hover Zoom Out Dengan CSS3, sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA