<button>Ok Button</button>
<button class="withPadding">Better Button</button>
button {
	display: inline-block;
	background-color: #6f9c1b;
	color: white;
	padding: 0.7rem 1.3rem;
	font-size: 1.1rem;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease,
		background-color 0.2s ease;
	position: relative;

	&:hover {
		transform: translateY(-0.2rem);
		box-shadow: 0px 2px 5px rgba(86, 84, 77, 0.21);
		background-color: lighten(#6f9c1b, 2%);
	}
}

.withPadding {
	&:hover {
		&::after {
			display: block;
			content: "";
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			height: 0.4rem;
		}
	}
}

body, html {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

button:first-child {
	margin-right: 10px;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.