Event Click Dengan CSS3

Hai jumpa lagi dengan saya 🙂 apa kabar nya ? semoga baik yah, amin.

Pada kesempatan kali ini saya akan berbagi sedikit tutorial mengenaiÂ Event Click Dengan CSS3, Kira-kira ada yang tau event click itu apa ? dari pada penasaran langsung saja kita praktikan.

1. Silahkan buka dulu teks editornya, kemudian ketika kode HTML berikut.

<input type="checkbox" id="toggle">
<label for="toggle">Click me!</label>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

2. Setelah itu lanjutkan untuk kode CSS nya, ketikan kode CSS beriku ini.

input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

label {
	display: block;
	background: #08C;
	padding: 5px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 2px;
	color: white;
	font-weight: bold;
}

input[type=checkbox]:checked ~ .to-be-changed {
	color: red;
}

3. Kalo sudah jangan lupa disimpan kemudian jalankan di browsernya masing-masing.

Gimana, sekarang tau kan event click itu apa ? Ok sampai disini artikel mengenaiÂ Event Click Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba.

Kategori