<form>
  <input id='check' type='checkbox'/>
  <label for='check'>check me!</label>
</form>

$img: url(https://images.unsplash.com/photo-1558643084-5781714dbb03?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
$c: #5ca8ff;
$d: 6.25em;
$t: .35s;

* { margin: 0 }

form {
	display: grid;
	place-content: center;
	height: 100vh;
	background: $img 50% 75%/ cover;
}

#check {
	position: absolute;
	right: 100vw;
	
	+ label {
		--i: var(--check, 1);
		--j: calc(1 - var(--i));
		position: relative;
		width: $d; height: $d;
		box-shadow: inset 0 0 0 4px $c;
		font: 700 2em/ #{$d} segoe script, cursive;
		color: #fff;
		text-align: center;
		text-transform: capitalize;
		--rect: inset(calc(var(--i)*.5px));
		-webkit-clip-path: var(--rect);
						clip-path: var(--rect);
		mix-blend-mode: var(--check, screen);
		cursor: pointer;
		transition: $t;
		
		&:before, &:after {
			position: absolute;
			top: 0; bottom: 0; right: 0; left: 0;
			opacity: var(--i);
			background: $c;
			transition: inherit;
			content: ''
		}
		
		&:after {
			left: 17.5%;
			background: 
				linear-gradient(90deg, #000 50%, transparent 0) 
					calc(var(--j)*100%)/ 200%;
			--poly: polygon(0 30%, 35% 60%, 100% 0, 
											100% 25%, 35% 85%, 0 55%);
			-webkit-clip-path: var(--poly);
							clip-path: var(--poly);
			transition: opacity $t, background-position 2*$t $t
		}
	}
	
	&:not(:checked) + label { --i: 0 }
}