Cara Membuat Button Melayang Menggunakan CSS3
Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Di panduan kali ini saya akan mencoba membagi Cara Membangun Button Melayang Menggunakan CSS3.
Supaya web teman-teman lebih menarik saya akan memberikan contoh Cara Membangun Button Melayang Menggunakan CSS3. berikut langkah-langkahnya:
– Pertama-tama teman-teman bikin struktur mendasar 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>Source Code Aplikasi</a>
<a class=button button--action>Kursus Blog</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 di button sehingga button seperti melayang*/
transition: all .15s ease;
}
/*Memberi animasi di ketika button di hover*/
.button:hover {
transform: translateY(-1px);
background-color: #468DB9;
box-shadow: 0 6px 12px #B3AEAE;
}
/*Memberi efek perubahan warna di ketika 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 di ketika button di click*/
.button--action:active {
background-color: #4C7CC2;
}Lalu save dan jangan lupa bikin 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 di ketika di hover backgroundnya akan berubah warna sesuai dengan warna yang kita berikan seperti gambar di bawah:
– Dan di ketika di click backgroundnya akan berubah warna sesuai dengan warna yang kita berikan seperti gambar di bawah:
Bagaimana teman-teman mudahkan Cara Membangun Button Melayang Menggunakan CSS3.
Demikian panduan saya bagi kali ini. Sehat selalu ya teman-teman, selamat mencoba.
Sumber https://kursuswebsite.org
