Inpows

Code & Solve

About Me

Profile
Inpows

Welcome to inpows.

Button Pulse Animation - Inpows
CSS HTML

Membuat Button Pulse Animation Menggunakan HTML dan CSS
Inpows
No Comments

Membuat Button Pulse Animation Menggunakan HTML dan CSS – Pada artikel ini akan membahas bagaimana membuat button pulse animation menggunakan HTML dan CSS. Dua buah file digunakan dalam pembuatan animasi pulse yaitu index.html dan style.css. Perhatikan source code dibawah ini untuk membuat button pulse animation menggunakan html dan css.

Membuat Button Pulse Animation Menggunakan HTML dan CSS

Source code pada file style.css

Source code berikut merupakan style css yang digunakan untuk membuat tampilan dan button.

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #43658b;
}

.container{
	width: 500px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.button-login {
	display: inline-block;
	font-weight: 600;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	border: 1px solid transparent;
	padding: 16px 20px;
	background: #F36F2E;
	font-size: 24px;
	line-height: 1.5;
	cursor: pointer;
	animation: none;
	margin-top: 80px;
	width: 200px;
	height: 70px;
	border-radius: 50px;
}

.center-button {
	display: flex;
	justify-content: center;
	align-items: center;
}

.button-login:hover{
	animation: pulse 1.5s infinite;
}

Keyframes untuk membuat animasi pulse

 

@keyframes pulse {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
		box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
	}

	70% {
		-moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0.4);
		box-shadow: 0 0 0 20px rgba(204, 169, 44, 0.4);
	}

	100% {
		-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
		box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
	}
}

Source code pada file index.html

source berikut ini adalah file index.html yang digunakan untuk melihat hasilnya pada web browser.

<!DOCTYPE html>
<html>
<head>
	<TITLE>Button Pulse Animation</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="center-button">
			<button class="button-login">
				<strong>LOG IN</strong>
			</button>
		</div>
	</div>
</body>
</html>

Hasil yang diperoleh

Video berikut ini memperlihatkan hasil dari button pulse animation menggunakan HTML dan CSS.

Temukan artikel menarik lainnya hanya di inpows.

Share :