Inpows

Code & Solve

About Me

Profile
Inpows

Welcome to inpows.

3D Button Glint Hover Effect - Inpows
CSS

Membuat Glint Hover Effect Pada Button Menggunakan CSS
Inpows
No Comments

Membuat Glint Hover Effect Pada Button Menggunakan CSS – Pada artikel ini kita akan membuat glint hover effect pada button menggunakan CSS. Pembuatan efek glint saat hover button dapat dibuat dengan menyiapkan satu file CSS dan tentunya juga satu file HTML. Perhatikan artikel dibawah ini untuk membuat glint hover effect pada button menggunakan CSS.

Membuat Glint Hover Effect Pada Button Menggunakan CSS

Kode CSS

Berikut ini adalah kode CSS yang digunakan untuk membuat glint hover effect pada button menggunakan CSS.

* {
	margin: 0;
	padding: 0;
}

body{
	background: #dadada;
}

.wrapper{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.btn{
	padding: 0.75em 2em;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	font-size: sans-serif;
	color: #0159ab;
	font-size: 32px;
	display: inline-block;
	border: 2px solid #0159ab;
	background: #fff;
	border-radius: 0.3em;
	transition: all 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
}

.btn:before{
	content: '';
	background-color: rgba(255,255,255,0.5);
	height: 100%;
	width: 3em;
	display: block;
	position: absolute;
	top: 0;
	left: -4.5em;
	transform: skewX(-45deg) translateX(0);
	transition: none;
}

.btn:hover{
	background-color: #0159ab;
	color: #fff;
	border-bottom: 4px solid #0159ab;
}

.btn:hover:before{
	transform: skewX(-45deg) translateX(14.5em);
	transition: all 0.5s ease-in-out;
}

@keyframes sheen{
	0% {
		transform: skewY(-45deg) translateX(0);
	}
	100%{
		transform: skewY(-45deg) translateX(12.5em);
	}
}

 

Kode HTML

Berikut ini adalah kode HTML yang dapat kamu salin.

<!DOCTYPE html>
<html>
<head>
	<TITLE>3D Button dengan Glint Hover Efek</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="wrapper">
		<a href="#" class="btn">Button</a>
	</div>
</body>
</html>

 

Hasil yang diperoleh

Kamu dapat melihat hasil yang diperoleh pada video dibawah ini dari kode CSS dan HTML diatas.

Share :