Membuat Animasi Efek Gradient Pada Button Dengan HTML CSS -

Animasi Efek Gradient ini adalah efek perpaduan beberapa warna-warna dalam sebuah object. Sehingga tampilan warna yang dilihat pada object akan terlihat lebih menarik. Dalam kasus kali ini kita akan belajar membuat efek gradient pada button. Jadi saat button dihover maka akan memberikan sebuah efek gradient. Langsung saja ikuti langkah-langkah membuatnya.

Buat struktur html seperti berikut ini:

<div class="box">
		<a href="#" data-text="Button" class="list"></a>
	</div>

JIka sudah selanjutnya tinggal memberikan style css agar semakin cantik tampilanya coba ketikkan code dibawah ini:

*{
	margin: 0;
	padding: 0;
}

.box{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #148f55;
}

.box .list{
	text-decoration: none;
	background: linear-gradient(30deg, #ff0060 0%, #06f5f5 25%,
		#ffd700 50%, #0028ff 100%);
	width: 300px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	font-size: 28px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: #fd1d1d;
	font-weight: 900;
	position: relative;
}

.box .list:before{
	content: attr(data-text);
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	background: #f0db4f;
	border-radius: 8px;
}

.box .list:hover{
	animation: move 0.5s linear infinite;
}

@keyframes move{
	to{
		background-position: 300px;
	}
}

Baiklah jika sudah simpan code diatas kemudian jalankan pada browser masing-masing. Apabila benar maka saat button dihover akan terlihat efek animasi gradient ya.

saya kira cukup dalam pembahasan artikel kali ini semoga dapat memberikan referensi dalam belajar,sampai jumpa dilain kesempatan dan terima kasih.

Membuat Animasi Efek Gradient Pada Button Dengan HTML CSS

Kategori