*,
*::before,
*::after {
	box-rotating: border-box;	
}

body {
  	background-color: #999;  
}

#on-off {
	width: 0;
	height: 0;	
}

.circles {
	grid-column: 1 / -1;
}

.btn {
	background: blue;
	display: block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.btn::after {
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: green;
	border-radius: inherit;
	justify-content: center;
	align-items: center;
	animation: animName .75s linear infinite paused;
}

#on-off:not(checked) + .btn {
	transition: transform: rotate(0deg);
}

#on-off:checked + .btn {
	transition: transform: rotate(360deg);
}