.frame
	.center
		.checkbox
			input(type="checkbox")#check.check 
			label(for="check")
			.rays
				- for(var i = 1; i <= 16; i++)
					div.ray
		

$rays: 16;

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #ad5389; 
	background: linear-gradient(180deg, #3c1053, #ad5389);
	
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.checkbox {
	width: 45px;
	height: 45px;
	
	.check {
		position:absolute;
		visibility:hidden;
		opacity:0;
		top:0;
		left:0;
		width:0.1px;
		height: 0.1px;

		& + label {
			display:block;
			width: 100%;
			height: 100%;
			border:2px solid #f0f0f0;
			border-radius:50%;
			box-sizing:border-box;
			cursor:pointer;
			z-index:10;
			box-shadow: 
			inset 1px 2px 7px 2px rgba(#000,0.6), 
			4px 4px 4px 0px rgba(#333,0.4);
			transition:all 0.7s ease;
		}
	
		&:checked {
			 & + label {
				border-width:14px;
				box-shadow: 
					4px 4px 4px 0px rgba(#333,0.4);
				background: 
					linear-gradient(90deg, #da4453, #89216b);
				animation: jelly .5s ease-in-out;
			}
			
			& ~ .rays {
			width: 100%;
			height: 100%;
			position:absolute;
			top: 11px;
			left: 22px;
			z-index: -1;
		.ray {
				width: 2px;
				height: 20px;
				background: #f0f0f0;
				position:absolute;
		}
	
		@for $i from 1 through $rays {
			
			$base : $i - 1;
			$angle: (360 / $rays) * $base;
			
			.ray:nth-child(#{$i}) {
				transform: rotate($angle+deg)
						translateY(140px);
				animation: radiate#{$i} 0.5s ease;
				opacity:0;
			}
			@keyframes radiate#{$i} {
	from {
		transform: rotate($angle+deg)
						translateY(40px);
		opacity: 1;
	}
	to {
		transform: rotate($angle+deg)
						translateY(140px);
					opacity: 0;
	}
}
			
		}
}
		}
	}
}
@keyframes jelly {
	0% {
    transform: scale(1, 1);
	}
	25% {
    transform: scale(1.5, 0.75)
	}	
	35% {
		transform: scale(0.75, 1.5);
	}
   
	50% {
		transform: scale(1.25, 0.75)
	}
    
	65% {
		transform: scale(0.75, 1.25)
	}
    
	75% {
		transform: scale(1.25,0.75)
	}
    
	100% {
		transform: scale(1, 1)		
	}
    
}

// jQuery v3.3.1 is supported