:root {
		--txtc: #545450;
		--txtch: #80bfb9;
		--bgh: #80bfb9;
		--easing: cubic-bezier(0.45, 0, 0.55, 1);
	}
	.btn {
		position: relative;
		box-sizing: border-box;
		text-decoration: none;
		overflow: hidden;
		color: var(--txtc);
		padding: .25rem 0;
		transition: color .2s var(--easing), background-color .2s var(--easing), border-color .2s var(--easing);
	}
	.btn::before ,
	.btn::after {
		content: '';
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
		height: 1px;
		transition: transform .2s var(--easing);
		background-color: var(--bgh);
	}
	.btn:hover {
		color: var(--txtch);
	}
	.btn.btn01::after {
		left: 0;
		width: 100%;
		transform-origin: right top;
		transform: scale(0, 1);
	}
	.btn.btn01:hover::after {
		transform: scale(1, 1);
	}
	.btn.btn02::after {
		left: 0;
		width: 100%;
		transform-origin: left top;
		transform: scale(0, 1);
	}
	.btn.btn02:hover::after {
		transform: scale(1, 1);
	}
	.btn.btn03::after {
		left: 0;
		width: 100%;
		transform-origin: left top;
		transform: scale(0, 1);
	}
	.btn.btn03:hover::after {
		transform-origin: right top;
		transform: scale(1, 1);
	}
	.btn.btn04::after {
		left: 0;
		width: 100%;
		transform-origin: right top;
		transform: scale(0, 1);
	}
	.btn.btn04:hover::after {
		transform-origin: left top;
		transform: scale(1, 1);
	}
	.btn.btn05::before ,
	.btn.btn05::after {
		width: 50%;
		transform: scale(0,1);
	}
	.btn.btn05::before {
		left: 0;
		transform-origin: left top;
	}
	.btn.btn05::after {
		right: 0;
		transform-origin: right top;
	}
	.btn.btn05:hover::before ,
	.btn.btn05:hover::after {
		transform: scale(1, 1);
	}
	.btn.btn06::before ,
	.btn.btn06::after {
		width: 50%;
		transform: scale(0,1);
	}
	.btn.btn06::before {
		left: 0;
		transform-origin: right top;
	}
	.btn.btn06::after {
		right: 0;
		transform-origin: left top;
	}
	.btn.btn06:hover::before ,
	.btn.btn06:hover::after {
		transform: scale(1, 1);
	}