How to create UI checkbox using HTML and CSS

In this article we will show you cow to create UI checkbox button using HTML and CSS. Here we have converted the input type checkbox to on/off switch button with CSS.

Video tutorial of How to create UI checkbox using HTML and CSS

This tutorial video can help you to create UI checkbox using HTML and CSS.

create UI checkbox using HTML and CSS[Source Codes]

This source code can help you to create UI checkbox using HTML and CSS. This source code will help you if you want to create on-off button with CSS.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="ui_check">
		<input type="checkbox" name="">
		<strong></strong>
		<label></label>
	</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #000;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.ui_check{
	position: relative;
	width: 100px;
	height: 40px;
	color: #fff;
}
.ui_check:before{
	content: "Yes";
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	line-height: 40px;
	text-align: center;
	z-index: 1;
}
.ui_check:after{
	content: "No";
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	height: 100%;
	line-height: 40px;
	text-align: center;
	z-index: 1;
}
.ui_check input{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 3;
	margin:0;
}
.ui_check strong{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	background: linear-gradient(to right, #00a0d1 1%, #03506a 2%);
	background-size: 100% 100%;
	transition: all 0.3s linear;
}
.ui_check label{
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	left: 0;
	background: linear-gradient(to bottom,#fff 0%, #454545);
	background-size: 100% 40px;
	border-radius: 30px;
	z-index: 2;
	transition: all 0.3s linear;
}

.ui_check input:checked + strong{
	box-shadow: 1px 1px 20px 3px #007295;
	background-size: 5000% 100%;
}
.ui_check input:checked + strong + label{
	left: 50%;
	background-size: 100% 100px;
}

How to create UI checkbox using HTML and CSS

Video tutorial of How to create UI checkbox using HTML and CSS

create UI checkbox using HTML and CSS[Source Codes]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Create Responsive Mobile Menu using Only HTML CSS | Responsive Navigation Slide Using CSS