Кнопка

HTML

<div class="button-container">
	<a href="#" class="button-hover">
		<span>Кнопка</span>
	</a>
</div>

CSS

.button-container {
	width:100%;
}

.button-hover {
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	color: #2e2e2e;
	text-transform: uppercase;
	text-decoration: none!important;
	letter-spacing: 3.5px;
	border-left: 2px solid #82c14f;
	border-right: 2px solid #82c14f;
	position: relative;
	display: flex;
	width: 160px;
	margin: 0 auto;
	outline: none;
}

.button-hover span {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	width: 100%;
}

.button-hover::before {
	content: "";
	height: 2px;
	background-color: #82c14f;
	width: 80%;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	transition: 0.3s;
}

.button-hover::after {
	content: "";
	height: 2px;
	background-color: #82c14f;
	width: 80%;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	transition: 0.3s;
}

.button-hover:hover::before {
	width: 100%;
}

.button-hover:hover::after {
	width: 100%;
}

Взято отсюда — https:// opytlife.net/2019/04/19/кнопка-с-простым-но-интересным-hover-эффек/