CSS like button with text shadow effect

                            <div class="heart_container">
	<div class="heart_box">
		<div class="heart">
			<label for="checkbox" class="heart">
				<input class="checkbox" id="checkbox" type="checkbox" />
				<div class="background">
					<i class="iconn fa fa-heart-broken"></i>
					<i class="iconn fa fa-heart"></i>
					
				</div> 
			</label>
		</div>
	</div>
</div>
                        

                            body{
	margin: 0;
	background: #151515;
}
.heart_container{
	display: flex;
	width: 100%;
	height: 100vh;
}
.heart_box{
	margin: auto;
}
.heart{
	width: 100px;
	height: 100px;
	
	position: relative;
	
	display:block; 
}




.background { 
	position:absolute;
	inset:0;
	border-radius: 20px;
	transition:all 150ms ease;

}

.checkbox {
	display: none;
}

.background:hover .iconn{
	border: none;
	text-shadow: 0px 0px 11px red;
	
}

.iconn{
	color: red;
	position: absolute;
	font-size: 100px;
	
}

.fa-heart{
	display: none;
}



.checkbox:checked ~ .background .fa-heart-broken{  
	display:  none;

}

.checkbox:checked ~ .background .fa-heart{  
	display:  block;

}