Cara Membuat Button Melayang Menggunakan CSS3

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.

Cara Membuat Button Melayang Menggunakan CSS3

Kategori