Cara Membuat Hover Button Keren dengan CSS3
Efek hover memang amat familiar untuk kita, dengan menggunakan efek ini kita dapat kreasikan element apapun menjadi sebuah efek yang amat menarik, jikalau kalian ingin merancang sebuah hover dan masih bingung ingin merancang efek hover, berikut ini akan saya berbagi referensi efek hover di sebuah button HTML. Simak panduan Cara Membuat Hover Button Keren dengan CSS3 dibawah ini.Baiklah seketika saja kita mulai dengan langkah pertama-tama, yakni kita akan bikin satu buah button dengan sintak HTML berikut ini.
<body>
<a href= class=button>My Hover</a>
</body>
Bagi button nya kalian dapat merancang beberapa buah element button, kemudian setelah sintak HTML button kalian ketikan, berikutnya kita akan desain dan merancang efek hover di 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%;
}Di sintak berikut, kalian dapat modifikasi efek hover menjadi sedemikian rupa agar semakin menarik bagi 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%;
}Di bagian sintak ini kalian dapat kreasikan button dengan mengubah atau menambah warna, ukuran dan yang lain nya sesuai keinginan. Setelah seluruh sintak HTML dan CSS3 diatas kalian ketikan, langkah terakhir simpan file nya kemudian buka di browser masing-masing dan lihat hasilnya.
Bagus lumayan demikianlah panduan mengenai bagaimana Cara Membuat Hover Button Keren dengan CSS3, semoga bermanfaat 🙂
Bagi lebih jelasnya, kalian dapat lihat panduan diatas di link demo dibawah ini.
Sumber https://kursuswebsite.org
