Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Button Melayang Menggunakan CSS3.
Supaya web teman-teman lebih menarik saya akan memberikan contoh Cara Membuat Button Melayang Menggunakan CSS3. berikut langkah-langkahnya:
– Pertama teman-teman buat struktur dasar HTML-nya dulu bawah ini :
<!DOCTYPE html> <html> <head> <title>Button Melayang</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> </body> </html>
Jangan lupa save dengan nama index.html
– Kedua teman-teman ketikan tag <a> dan beri class seperti kode HTML di bawah ini:
<a class="button">Dumetschool</a> <a class="button button--action">Kursus Website</a>
– Ketiga teman-teman ketikan css-nya:
body {
font-family: sans-serif;
background-color: #EEEEEE;
}
.button {
display: inline-block;
height: 40px;
line-height: 40px;
margin: 6px;
padding: 0 20px;
cursor: pointer;
user-select: none;
color: black;
background-color: #89CCED;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
box-shadow: 0 4px 6px #959494;/*Memberi bayangan pada button sehingga button seperti melayang*/
transition: all .15s ease;
}
/*Memberi animasi pada saat button di hover*/
.button:hover {
transform: translateY(-1px);
background-color: #468DB9;
box-shadow: 0 6px 12px #B3AEAE;
}
/*Memberi efek perubahan warna pada saat button di click*/
.button:active {
transform: translateY(1px);
background-color: #25597A;
box-shadow: 0 2px 4px #353333;
}
.button--action {
color: white;
background-color: #5196E1;
}
.button--action:hover {
background-color: #1152B0;
}
/*Memberi efek perubahan warna pada saat button di click*/
.button--action:active {
background-color: #4C7CC2;
}Lalu save dan jangan lupa buat link nya di HTML teman-teman. Di sini saya memberi nama file css-nya dengan nama file style.css
– Hasilnya akan menjadi seperti ini:
– Dan pada saat di hover backgroundnya akan berubah warna sesuai dengan warna yang kita berikan seperti gambar di bawah:
– Dan pada saat di click backgroundnya akan berubah warna sesuai dengan warna yang kita berikan seperti gambar di bawah:
Bagaimana teman-teman mudahkan Cara Membuat Button Melayang Menggunakan CSS3.
Sekian tutorial saya untuk kali ini. Sehat selalu ya teman-teman, selamat mencoba.
The post Cara Membuat Button Melayang Menggunakan CSS3 appeared first on Kursus Website Terbaik.