Cara Membuat Animasi Hover Dengan HTML dan CSS

Halo Dumenity, selamat datang kembali di website tips dan trik Dumetschool. Berjumpa lagi dengan saya pada pembahasan tips dan trik seputar dunia website, lama kita tak berjumpa ya 🙂

Pada kesempatan kali ini saya akan memberikan tips tentang Cara Membuat Animasi Hover Dengan HTML dan CSS dimana dalam pembuatan hanya menggunakan 1 pasang tag html dan saya berikan animasi pada saat di hover dengan css. Kita akan memanfaatkan fungsi transition , transform, content dan fungsi yang biasa kita pakai seperti padding, text-align, fonz-size dll.

Pada latihan Cara Membuat Animasi Hover Dengan HTML dan CSS ini saya akan membuat sebuah bentuk kotak yang di dalam nya ada text “Selamat Datang” kemudian pada saat di hover kotak akan berputar dan berganti bentuk bulat lalu text akan berganti menjadi “Dumet School”. Baik, langsung saja kita praktekkan pertama – tama siapkan text editornya dan buat tag html nya lalu save dengan nama index.html atau bisa ketikkan seperti script di bawah ini

<!DOCTYPE html>
<html>
<head>
	<title><strong>Cara Membuat Animasi Hover Dengan HTML dan CSS</strong></title>
</head>
<body>
	<div id="bulat"></div>
</body>
</html>

Langkah selanjutnya kita berikan script css nya

#bulat {
	margin: 100px;
	height: 200px; 
	width: 200px;
	background: #27508F;
	transition: border-radius 0.1s ease-in;
	border: 5px solid #F68D1F;
}

Kemudian masukkan text dengan fungsi content

#bulat::after { 
    content: "Selamat Datang";
	line-height: 200px;
	padding-left: 33px;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
}

Save dan jalankan pada browsernya, hasilnya seperti gambar di bawah ini

Kemudian kita berikan fungsi hover untuk menjadi bulat

#bulat:hover {
	background: #F68D1F;
	transform: rotate(1080deg);
	border-radius: 100%;
	transition: all 1s ease;
	border: 5px solid #27508F;
}

Kemudian pada saat setelah di hover kita masukkan kata “Dumet School”

#bulat:hover::after { 
        content: "Dumet School";
	line-height: 200px;
	color: #fff;
	font-weight: bold;
	font-size: 19px;
	padding-left: 43px;
}

Jika sudah save dan refresh pada browsernya maka akan tampil seperti gambar di bawah ini ketika kita hover

Itulah Cara Membuat Animasi Hover Dengan HTML dan CSS untuk tampil ke semua browser teman – teman harus tambahkan script lagi pada css nya. Bisa lihat script lengkap nya di bawah ini

#bulat {
	margin: 100px;
	height: 200px; 
	width: 200px;
	background: #27508F;
	-webkit-transition: -webkit-border-radius 0.5s ease-in;
	-moz-transition: -moz-border-radius 0.5s ease-in;
	-o-transition: border-radius 0.5s ease-in;
	-ms-transition: border-radius 0.5s ease-in;
	transition: border-radius 0.1s ease-in;
	border: 5px solid #F68D1F;
}
#bulat::after { 
    content: "Selamat Datang";
	line-height: 200px;
	padding-left: 33px;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
}
#bulat:hover {
	background: #F68D1F;
	-webkit-transform: rotate(1080deg);
	-moz-transform: rotate(1080deg);
	-o-transform: rotate(1080deg);
	-ms-transform: rotate(1080deg);
	transform: rotate(1080deg);

	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;

	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	border: 5px solid #27508F;
}
#bulat:hover::after { 
    content: "Dumet School";
	line-height: 200px;
	color: #fff;
	font-weight: bold;
	font-size: 19px;
	padding-left: 43px;
}

Baik, sekian dan terimakasih.

Sampai jumpa pada artikel yang akan datang, semoga bermanfaat.