CSS: toggle button

今更toggle buttonあれこれ紹介

単純形式

CSS

.toggle{
	display:inline-block;
	height:16px;
	margin:0 .5em 0 0;
	position:relative;
	width:32px
}
.toggle input{
	cursor:pointer;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	opacity:0;
	z-index:5
}
.toggle b{
	background:#ccc;
	border-radius:16px;
	box-sizing:border-box;
	width:32px;
	height:16px;
	position:relative;
	display:inline-block;
	transition:.4s
}
.toggle b:after{
	background:#fff;
	box-shadow:0 0 5px rgba(0,0,0,.2);
	content:"";
	width:16px;
	height:16px;
	border-radius:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:2;
	transition:.4s
}
.toggle :checked+b{background-color:#4d6}
.toggle :checked+b:after{left:16px}

label{cursor:pointer}

class=toggleの要素の子要素である空のb要素にtoggleの中身を演じて頂く。

HTML

<label><a class=toggle><input type=checkbox><b></b></a>labelで全包囲</label>
<label class=toggle><input type=checkbox><b></b></label>click範囲少

単純形式(軽量)

若干少ない記述量

CSS

.toggle{
	position:relative;
	padding-left:2.5em;
	font-size:1em;
	cursor:pointer
}
.toggle input{display:none}
.toggle b{
	border-radius:1em;
	background-color:#ccc;
	left:0;
	height:1em;
	width:2em
}
.toggle b:before{
	border-radius:50%;
	background-color:#fff;
	content:"";
	height:1em;
	width:1em
}
.toggle b:before,.toggle b{position:absolute;transition:.2s}
.toggle :checked+b{background-color:#6b6}
.toggle :checked+b:before{transform:translateX(1em)}

space key押しても無反応、tab押しても的にならないという問題には目を瞑る

<label class=toggle><input type=checkbox><b></b>nobody isn't here</label>
<label class=toggle><input type=checkbox><b></b>no money isn't there</label>

演出増加

長いので改行少なくしました。

CSS

.toggle{position:relative;display:block;cursor:pointer;padding:.25em 0;display:flex;align-items:center}
.toggle input[type=checkbox]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.toggle input:focus+.switch .handle{width:25px;height:25px;top:-5px;box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 0 2px #45b}

.switch{display:block;width:37px;height:14px;position:relative;margin-right:1em}
.switch .track{border-radius:19px;position:absolute;top:0;bottom:0;left:1px;right:1px;background:rgba(0,0,0,.26);overflow:hidden;transform:translateZ(0)}
.switch .track::before{background:#9ad;content:""}

.switch .handle{position:absolute;top:-3px;left:0;width:20px;height:20px;border-radius:20px;background:snow;box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 0 2px transparent;overflow:hidden;box-sizing:border-box;transition:all .15s ease-out;transform:translateZ(0)}
.switch .handle::before{background:#45b;content:""}

.switch .handle::before,.switch .track::before{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .15s ease-out;transform:translateZ(0)}

:checked+.switch .handle{transform:translate3d(17px,0,0);box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 0 2px transparent}
:checked+.switch .handle::before,:checked+.switch .track::before{opacity:1}

htmlの記述がいささか煩雑か…。

HTML

<label class=toggle><input type=checkbox> <span class=switch><span class=track></span> <span class=handle></span> </span>光子は反光子</label>
<label class=toggle><input type=checkbox> <span class=switch><span class=track></span> <span class=handle></span> </span>シュレーディンガーの猫は死体</label>

演出増加(軽量)

上記の記述量を減らしただけ。toggle以外のclassを排除。b要素、s要素、u要素に動作を担当して頂く

CSS

.toggle{position:relative;padding:.25em 0;display:flex;align-items:center;cursor:pointer}
.toggle input[type=checkbox]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.toggle input:focus+b u{width:25px;height:25px;top:-5px;box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 0 2px #45b}

.toggle b{position:relative;display:block;width:37px;height:14px;margin-right:1em}
.toggle s{border-radius:19px;top:0;bottom:0;left:1px;right:1px;background:rgba(0,0,0,.26)}
.toggle u{border-radius:20px;top:-3px;left:0;width:20px;height:20px;background:snow;box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 0 2px transparent;box-sizing:border-box;transition:all .15s ease-out}
.toggle s,.toggle u{position:absolute;overflow:hidden;transform:translateZ(0)}

.toggle u::before{background:#45b;content:""}
.toggle s::before{background:#9ad;content:""}
.toggle s::before,.toggle u::before{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .15s ease-out;transform:translateZ(0)}

.toggle :checked+b u{transform:translate3d(17px,0,0);box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 0 2px transparent}
.toggle :checked+b u::before,:checked+b s::before{opacity:1}

htmlの記述量も盛り下がっております。<b><s></s><u></u></b>が肝となります

HTML

<label class=toggle><input type=checkbox><b><s></s><u></u></b>光は波平</label>
<label class=toggle><input type=checkbox><b><s></s><u></u></b>エネルギーは質屋</label>