:root {
		--txtc: #80bfb9;
		--txtch: #fff;
		--bgh: #80bfb9;
		--easing: cubic-bezier(0.45, 0, 0.55, 1);
	}
	.btn {
		margin: .5rem;
		position: relative;
		box-sizing: border-box;
		text-decoration: none;
		overflow: hidden;
		z-index: 1;
		color: var(--txtc);
		padding: 1rem 3rem;
		border:1px solid var(--txtc);
		display: inline-block;
		transition: color .2s var(--easing), background-color .2s var(--easing), border-color .2s var(--easing);
	}
	.btn::after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: transform .2s var(--easing);
		z-index: -1;
		background-color: var(--bgh);
	}
	.btn:hover {
		color: var(--txtch);
	}
	.btn.btn01::after {
		transform-origin: left top;
		transform: scale(0, 1);
	}
	.btn.btn01:hover::after {
		transform-origin: right top;
		transform: scale(1, 1);
	}
	.btn.btn02::after {
		transform-origin: right top;
		transform: scale(0, 1);
	}
	.btn.btn02:hover::after {
		transform-origin: left top;
		transform: scale(1, 1);
	}
	.btn.btn03::after {
		transform-origin: left bottom;
		transform: scale(1, 0);
	}
	.btn.btn03:hover::after {
		transform-origin: left top;
		transform: scale(1, 1);
	}
	.btn.btn04::after {
		transform-origin: left top;
		transform: scale(1, 0);
	}
	.btn.btn04:hover::after {
		transform-origin: left bottom;
		transform: scale(1, 1);
	}