Membuat Hover Button Material Design
Button masuk ke dalam bahasa inggris atau english yaitu bahasa Jermanik yang pertama kali dituturkan di Inggris pada Abad Pertengahan Awal dan saat ini merupakan bahasa yang paling umum digunakan di seluruh dunia. Bahasa Inggris adalah bahasa ibu ketiga yang paling banyak dituturkan di seluruh dunia, setelah bahasa Mandarin dan bahasa Spanyol. Bahasa Inggris juga digunakan sebagai bahasa kedua dan bahasa resmi oleh Uni Eropa, Negara Persemakmuran, dan Perserikatan Bangsa-Bangsa, serta beragam organisasi lainnya.
Kali ini Jejak Mountain akan membahas bagaimana cara membuat material design Hover Button.
Mari Simak berikut .
Langkah 1 : Cara Membuat Hover Button Material Design
Baiklah, kita mulai dengan langkah pertama yaitu membuat file index.html terlebih dahulu dan membuat struktur HTML sederhana untuk tampilan menu, untuk itu silahkan ketikan sintak HTML sederhana berikut ini.
<body>
<h2>Hover button Material Design</h2>
<button class="btn" style="letter-spacing: 2px;">Jejak Mountain</button>
</body>
<h2>Hover button Material Design</h2>
<button class="btn" style="letter-spacing: 2px;">Jejak Mountain</button>
</body>
Langkah 2 : Cara Membuat Hover Button Material Design
Langkah selanjutnya, setelah membuat struktur menu seperti diatas adalah mendesain tampilan, mengatur layout, warna dan tentunya membuat animasi bubble untuk menu nya, silahkan kalian ketikan sintak CSS untuk membuat animasi bubble berikut ini.
<style>
*{
margin: 90px 150px;
}
.btn{
background: orange;
border: none;
padding: 16px 32px;
color: white;
font-weight: bold;
font-size: 25px;
transition: 1s;
}
.btn:hover{
background: #08f;
}
</style>
*{
margin: 90px 150px;
}
.btn{
background: orange;
border: none;
padding: 16px 32px;
color: white;
font-weight: bold;
font-size: 25px;
transition: 1s;
}
.btn:hover{
background: #08f;
}
</style>
Syntax Lengkap :
Post a Comment