CSS3 Checkbox Styles Collection

CSS3 를 체크박스 스타일

Checkbox Source

See the Pen 체크박스 스타일 모음 by jaeheekim (@jaehee) on CodePen.

CSS Preview

css

/* 체크박스 컨테이닝 박스 공통 스타일 정의 */
.page section > div {
	margin: 25px auto;
	position: relative;
}
.page section input[type="checkbox"] {
	visibility: hidden;
}
/**
 * ================================
 * slideOne
 * ================================
 */
.slideOne {
	top: 10px;
	width: 50px;
	height: 10px;
	background: #333;
	border-radius: 50px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2);
}
.slideOne label {
	position: absolute;
	display: block;
	width: 16px;
	height: 16px;
	top: -3px;
	left: -3px;
	background: #fcfff4;
	cursor: pointer;
	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	border-radius: 100%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.slideOne input[type="checkbox"]:checked + label {
	left: 37px;
}

/**
 * ================================
 * slideTwo
 * ================================
 */
.slideTwo {
	width: 80px;
	height: 30px;
	background: #333;
	border-radius: 50px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .4);
}
.slideTwo:after {
	position: absolute;
	top: 14px;
	left: 14px;
	height: 2px;
	width: 52px;
	background: #111;
	content: "";
	border-radius: 50px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2);
}
.slideTwo label {
	position: absolute;
	top: 4px;
	left: 4px;
	display: block;
	width: 22px;
	height: 22px;
	cursor: pointer;
	background: #fcfff4;
	border-radius: 100%;
	z-index: 1;
	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}
.slideTwo label:after {
	content: "";
	width: 10px;
	height: 10px;
	position: absolute;
	top: 6px;
	left: 6px;
	background: #505050;
	border-radius: 100%;
	box-shadow: inset 0 1px 1px #000, 0 1px 0 rgba(255, 255, 255, 0.8);
}
.slideTwo input[type="checkbox"]:checked + label {
	left:54px;
}
.slideTwo input[type="checkbox"]:checked + label:after {
	/* 활성화 컬러 */
	background: #27ae60;
}

/**
 * ================================
 * slideThree
 * ================================
 */
.slideThree {
	width: 80px;
	height: 26px;
	background: #333;
	border-radius: 50px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.4);
}
.slideThree:before,
.slideThree:after {
	position: absolute;
	z-index: 0;
	font:bold 12px/26px Arial, sans-serif;
	color: #000;
}
.slideThree:before {
	content: 'ON';
	color: #27ae60;
	position: absolute;
	left: 10px;
}
.slideThree:after {
	content: "OFF";
	right: 10px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, .15);
}
.slideThree label {
	display: block;
	width: 34px;
	height: 20px;
	cursor: pointer;
	position: absolute;
	left: 3px;
	top: 3px;
	z-index: 1;
	background: #fcfff4;
	border-radius: 50px;
	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	box-shadow: inset 0 -2px 1px 0 rgba(0, 0, 0, 0.5);
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}
.slideThree input[type="checkbox"]:checked + label {
	left: 43px;
}

/**
 * ================================
 * roundOne
 * ================================
 */
.roundedOne {
	width: 28px;
	height: 28px;
	background: #fcfff4;
	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	border-radius: 100%;
	box-shadow: inset 0 1px 1px #fff, 0 1px 3px rgba(0, 0, 0, 0.7);
}
.roundedOne label {
	width: 20px;
	height: 20px;
	cursor: pointer;
	position: absolute;
	left: 4px;
	top: 4px;
	background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
	background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
	border-radius: 50px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 2px 0 #fff;
}
.roundedOne label:after {
	content: "";
	width: 16px;
	height: 16px;
	position: absolute;
	top: 2px;
	left: 2px;
	background: #27ae60;
	background: -webkit-linear-gradient(top, #27ae60 0%, #145b32 100%);
	background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
	border-radius: 100%;
	box-shadow: inset 0 1px 1px #fff, 0 1px 3px rgba(0, 0, 0, 0.5);
	opacity: 0;
}
.roundedOne label:hover::after {
	opacity: 0.4;
}
.roundedOne input[type=checkbox]:checked + label:after {
	opacity: 1;
}
/**
 * ================================
 * roundTwo
 * ================================
 */
.roundedTwo {
	width: 28px;
	height: 28px;
	background: #fcfff4;
	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	border-radius: 50px;
	box-shadow: inset 0 1px 1px #fff, 0 1px 3px rgba(0, 0, 0, 0.7);
}
.roundedTwo label {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 4px;
	left: 4px;
	cursor: pointer;
	background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
	background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
	border-radius: 50px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 2px 0 #fff;
}
.roundedTwo label:after {
	content: "";
	width: 12px;
	height: 8px;
	position: absolute;
	top: 5px;
	left: 4px;
	border: solid #fcfff4;
	border-width:0 0 3px 3px;
	opacity: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.roundedTwo label:hover::after {
	opacity: 0.3;
}
.roundedTwo input[type=checkbox]:checked + label:after {
	opacity: 1;
}

/**
 * ================================
 * squaredOne
 * ================================
 */
.squaredOne {
	width: 20px;
}
.squaredOne label {
	width: 28px;
	height: 28px;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
	background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.4);
}
.squaredOne label:after {
	content: "";
	width: 14px;
	height: 10px;
	position: absolute;
	top: 6px;
	left: 7px;
	border: solid #fcfff4;
	border-width: 0 0 3px 3px;
	opacity: 0;
	-webkit-transform: rotate(-50deg);
	transform: rotate(-50deg);
	box-shadow:inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}
.squaredOne label:hover::after {
	opacity: 0.3;
}
.squaredOne input[type=checkbox]:checked + label:after {
	opacity: 1;
}

/**
 * ================================
 * squaredTwo
 * ================================
 */
.squaredTwo {
	width: 20px;
}
.squaredTwo label {
	width: 28px;
	height: 28px;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	background: #fcfff4;
	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	border-radius: 4px;
	box-shadow: inset 0 1px 1px #fff, 0 1px 3px rgba(0, 0, 0, 0.7);
}
.squaredTwo label:after {
	content: "";
	width: 14px;
	height: 10px;
	position: absolute;
	top: 6px;
	left: 7px;
	border: solid #333;
	border-width: 0 0 3px 3px;
	opacity: 0;
	-webkit-transform: rotate(-50deg);
	transform: rotate(-50deg);
	box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.squaredTwo label:hover::after {
	opacity: 0.5;
}
.squaredTwo input[type=checkbox]:checked + label:after {
	opacity: 1;
}

Jaehee's WebClub