如何实现具有阴影过渡效果的按钮悬停和活动状态

Question

我正在尝试实现一种解决方案，以实现按钮的以下外观：

btn-primary具有绿色阴影，而btn-secondary具有白色阴影。

我尝试了不同的方法，但是由于z-index问题而无法正常工作。

任何带有代码段的建议都会有所帮助。

我想将它们用作：

button,
.btn {
	display: inline-block;
	font-size: inherit;
	line-height: 0.42;
	padding: 0.8em 0.8em 0.8em;
	font-weight: normal;
	border-style: solid;
	background: transparent;
	border-radius: 0;
	cursor: pointer;
	font-family: 'Foco', sans-serif;
	text-align: center;
	max-width: 17.5rem;
	min-width: 11.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;
	transform: translate(0.5em -0.4em);
	transition: transform 0.2s;
	/*border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;*/
	border: 2px solid blue;
	letter-spacing: 1px
}

.btn.btn-disabled:active {
	opacity: 0.6;
}
.btn:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
	transform: translate(0.1em, -0.1em);
	transition: transform 0.2s, background-color 0.2s;
}
.btn-primary {
	color: #00008B;
	border-color: #00008B;
}
.btn-primary:hover {
	color: #00008B;
	background-color: transparent;
	border-color: #00008B;
}
.btn-primary:hover::before {
	background-color: #49E20E;
	transform: translate(-0.2em, -0.2em);
	transition-duration: 0.5s;
}
.btn-primary:active {
	transform: translate(-0.2em, -0.2em);
	transition-duration: 0.5s;
	background-color: transparent !important;
	box-shadow: none !important;
}
.btn-primary:active::before {
	transition-duration: 0.5s;
	transform: translate(-0.2em, -0.2em);
}
.btn-primary.focus,
.btn-primary:focus {
	box-shadow: none !important;
}
a.btn.btn-primary:focus::before {
	background-color: #49E20E;
	transform: translate(-0.2em, -0.2em);
	transition-duration: 0.5s;
}
/* 
secondary buttons 
*/

.btn-secondary {
	color: #00008B;
	border-color: #00008B;
	cursor: pointer;
}
.btn-secondary:hover {
	color: #00008B;
	background-color: transparent;
	border-color: #00008B;
	cursor: pointer;
}
.btn-secondary:hover::before {
	background-color: #ffffff;
	transform: translate(-0.2em, -0.2em);
	transition-duration: 0.5s;
}
.btn-secondary:active {
	transform: translate(-0.2em, -0.2em);
	transition-duration: 0.5s;
	background-color: transparent !important;
	box-shadow: none !important;
}
.btn-secondary:active::before {
	transition-duration: 0.5s;
	transform: translate(-0.2em, -0.2em);
}
.btn-secondary.focus,
.btn-secondary:focus {
	box-shadow: none !important;
}
button.btn.btn-secondary:focus::before {
	background-color: #ffffff;
	transform: translate(-0.2em, -0.2em);
	transition-duration: 0.5s;
}

<a href="#" class="btn btn-primary" role="button">Click</a>
or
<a href="#" class="btn btn-secondary" role="button">Click</a>