[装飾系]Input checkbox チェックした時にふわっと色の波紋が出るチェックボックス

CSS HTML
Update 2018.02.03

チェックした時にふわっと色の波紋が出る

チェックした時にふわっと色の波紋が出るチェックボックスです。

browser:  65 11 20 11 
ニャン易度 
<div class="cp_ipcheck">
	<label>
	<input type="checkbox" class="option-input02 checkbox" checked />
	ネコ
	</label>
	<label>
	<input type="checkbox" class="option-input02 checkbox" />
	イヌ
	</label>
	<label>
	<input type="checkbox" class="option-input02 checkbox" />
	ウサギ
	</label>
</div>
.cp_ipcheck {
	width: 90%;
	margin: 2em auto;
	text-align: left;
}
@keyframes click-wave {
	0% {
		position: relative;
		width: 30px;
		height: 30px;
		opacity: 0.35;
	}
	100% {
		width: 200px;
		height: 200px;
		margin-top: -80px;
		margin-left: -80px;
		opacity: 0;
	}
}
.cp_ipcheck .option-input02 {
	position: relative;
	top: 13.33333px;
	right: 0;
	bottom: 0;
	left: 0;
	width: 30px;
	height: 30px;
	margin-right: 0.5rem;
	cursor: pointer;
	transition: all 0.15s ease-out 0s;
	color: #ffffff;
	border: none;
	outline: none;
	background: #d7cbcb;
	-webkit-appearance: none;
	        appearance: none;
}
.cp_ipcheck .option-input02:hover {
	background: #d6a9a9;
}
.cp_ipcheck .option-input02:checked {
	background: #da3c41;
}
.cp_ipcheck .option-input02:checked::before {
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	content: '✔';
	text-align: center;
}
.cp_ipcheck .option-input02:checked::after {
	position: relative;
	display: block;
	content: '';
	-webkit-animation: click-wave 0.65s;
	        animation: click-wave 0.65s;
	background: #da3c41;
}
.cp_ipcheck .option-input02.radio {
	border-radius: 50%;
}
.cp_ipcheck .option-input02.radio::after {
	border-radius: 50%;
}
.cp_ipcheck label {
	line-height: 40px;
	display: block;
}
.cp_ipcheck .option-input02:disabled {
	cursor: not-allowed;
	background: #b8b7b7;
}
.cp_ipcheck .option-input02:disabled::before {
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	content: '✖︎';
	text-align: center;
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?