Cara Membuat Emoticon Toggle Dengan CSS

Emoticon biasa digunakan dalam percakapan atau chatting untuk mewakili expresi wajah , tampilan atau expresinya sangat banyak sekali seperti expresi wajah,gestur tubuh,atau benda-benda yang ada disekitar. dalam pembahasan kali ini saya ingin membuat emoticon expresi wajah, bagaimana cara membuatnya yuuuk ikuti langkah-langkah berikut.Langkah pertama buat file HTM untuk strukturnya seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Emoticon Toggle Dengan CSS</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<input type="checkbox">
</body>
</html>

Langkah yang kedua tambahkan style CSS berikut ini:

body{
	background-color:#000022;
	padding:0;
	margin:0;
	height: 100vh;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
}
input[type="checkbox"]{
	height: 80px;
	width: 180px;
	position: relative;
	-webkit-appearance:none;
	background-color: #fff;
	border-radius: 80px;
	outline: none;
	cursor: pointer;
}
input[type="checkbox"]:before{
	position: absolute;
	content: "";
	background-color: #fff;
	height: 10px;
	width: 10px;
	top:30px;
	left:20px;
	border-radius: 50%;
	box-shadow: 26px 0 0 0 #fff, 13px 5px 0 28px #5f0;
	transition: 0.7s;
}
input[type="checkbox"]:after{
	position: absolute;
	content: "";
	background-color: #fff;
	height: 13px;
	width: 28px;
	top:45px;
	left:24px;
	border-radius: 0 0 28px 28px;
	transition: 0.7s;
}
input:checked[type="checkbox"]:before{
	box-shadow: 26px 0 0 0 #fff,13px 5px 0 25px #fa0;
	transform: translateX(105px);
}
input:checked[type="checkbox"]:after{
	border-radius:28px 28px 0 0;
	transform: translateX(105px);
}

Jika sahabat sudah membuatnya silahkan jalankan pada browser masing-masing ,maka tampilannya akan seperti berikut:

Demikian pembahasan kali ini tentang cara membuat Emoticon Toggle dengan CSS, semoga bermanfaat dan sampai jumpa lagi dengan pembahsan lainnya.

terima kasih.

Cara Membuat Emoticon Toggle Dengan CSS

Kategori