.container
	button.btn
		span.btn-text Hover Me
	button.btn.rounded
		span.text-green Hover Me

body,html{
	height: 100%;
}

body {
	font-family: "Lato", sans-serif;
	color: #111;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: center;
	justify-content: center;
	background-color: #ECECEC;
}

.container {
	width: auto;
	display: flex;
	flex-direction: column;
	//border: 2px solid black;
}

.btn{
	margin: 20px auto;
	border: none;
	padding: 10px 44px;
	font-size: 36px;
	position: relative;
	&::before{
		transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		content: '';
		width: 50%;
		height: 100%;
		background: black;
		position: absolute;
		top: 0;
		left: 0;
	}

	& .btn-text{
		color: white;
		// check out mdn docs for different types of blend modes. 
		mix-blend-mode: difference;
	}
	&:hover{
		&::before{
			background: black;
			width: 100%;
		}
	}
	//rounded btn styles
	&.rounded{
		border-radius:50px;
		& .text-green{
			color:#00F0B5;
			mix-blend-mode: difference;
		}
		
		&::before{
			border-radius: 50px;
			width: 25%;
			background: #00F0B5;
		}
		&:hover{
			&::before{
			background: #00F0B5;
				width: 100%;
			}
		}	
	}
}