CSSだけで作れるトグルボタン

こんにちは、音ゲーマーのKenです。好きなブキはわかばシューターです。

CSSだけで作れるトグルボタン

今回はCSSだけで作れるトグルボタンを紹介します。押すと点いて、もう一回押すと消えるやつです。是非お試し下さい。

イカ、よろしく~

DEMO
 

 icon-check 対応ブラウザ

今回の対応ブラウザは執筆時点(2015年9月)で Chromeのみとなります。ご注意下さい。

 icon-exclamation-circle IE11: appearance属性に対応していません
 icon-exclamation-circle Firefox: appearance属性には対応しているようですが、手動でスタイル設定できませんでした

 

 icon-check ベースHTML


このHTMLをベースにしてスタイルを設定していきます。スタイルなしで表示すると、ふつうのチェックボックスですね。

今はまだ表示されませんが、 data-off-label , data-on-label という属性に、ボタンがOFFの時とONの時に表示する言葉を設定しておきます。

data- で始まる属性は開発者が自由に要素に付加できる属性です。HTML の仕様として data-off-label などが存在するわけではありません。

CSSだけで作れるトグルボタン_画像1

 

 icon-check チェックボックススタイルの無効化

.toggle_button:focus:hover{
	outline: none;
}

.toggle_button{
	appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	-moz-appearance: none;

	display: inline-block;
	vertical-align: top;
	width: 64px;
	height: 64px;
	margin: 0;

	border: 1px solid #aaa;
}

2行目 outline:none; という指定を追加していますが、Chromeではチェックボックスなどをクリックすると青枠が表示され、見た目が変わってしまうので無効にしました。

6行目 appearance:none
HTMLで input type=”checkbox” を指定しているため、普通に表示するとチェックボックスとして表示されます。この状態ではCSSでうまく見た目を変更できないので、 appearance:none を指定してデフォルトのスタイルを無効にします。また、ボタンの大きさと枠も合わせて設定しました。

CSSだけで作れるトグルボタン_画像2

 

 icon-check ボタンの見た目を設定する

.toggle_button:focus:hover{
	outline: none;
}

.toggle_button{
	appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	-moz-appearance: none;

	display: inline-block;
	vertical-align: top;
	width: 64px;
	height: 64px;
	margin: 0;

	border-radius: 8px;
	border: 1px solid #aaa;
	background-color: #333;

	cursor: pointer;

	transition: 200ms;
}

.toggle_button:active{
	height: 62px;
	margin-top: 2px;
	transition: none;
}

ボタンの見た目を変更しましょう。アニメーションするボタンのスタイルを流用して、色を変えてみました。

クリックするとへこむところまでできましたね。

CSSだけで作れるトグルボタン_画像3

 

 icon-check ON/OFF状態に合わせた表示を設定する

.toggle_button:focus:hover{
	outline: none;
}

.toggle_button{
	appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	-moz-appearance: none;

	display: inline-block;
	vertical-align: top;
	width: 64px;
	height: 64px;
	margin: 0;

	border-radius: 8px;
	border: 1px solid #aaa;
	background-color: #333;

	text-align: center;
	line-height: 60px;
	font-size: 20px;

	cursor: pointer;

	transition: 200ms;
}

.toggle_button:active{
	height: 62px;
	margin-top: 2px;

	transition: none;
}

.toggle_button:not(:checked)::after{
	display: inline;
	content: attr(data-off-label);
	color: #888;

	transition: none;
}
.toggle_button:checked::after{
	display: inline;
	content: attr(data-on-label);
	color: #cfc;

	text-shadow:
		0px 0px 10px #cfc,
		0px 0px 20px #cfc,
		0px 0px 30px #cfc;
	transition: 400ms;
}
.toggle_button:active::after{
	transition: none;
}

ボタンを押す度にON/OFFが切り替わるようにします。以下の3つがポイントです。

37行目 :checked::after
「チェックボックスがONの時、中身に要素を追加する」という指定です。逆に、 :not(:checked)::after でチェックがOFFの時の中身を指定します。
46行目 content:attr(data-on-label)
表示するテキストを指定します。 attr(属性名) の指定でHTMLで入力していた文字列を表示させます。

49行目 text-shadow

CSSだけで作れるトグルボタン_画像4

ONとOFFそれぞれで見た目を変更することでスイッチが点いたように見せています。10px, 20px, 30pxという3種類のぼかしサイズで緑色の光を重ねて、文字の周りを光らせています。

DEMO
 

 icon-check おわり

イカがでしたか?このようにただのチェックボックスでも、CSSを設定するだけでちょっとオシャレなトグルボタンにすることができます。

今回はCSS3の中でもまだ実装が進んでいない機能を使ってしまったためChromeのみでしたが、いずれは多くのブラウザで使用可能になるでしょう(多分)。ぜひ、おためしください。

それでは。

おすすめ

TOP
TOP