Button shadow on hover correct animation

css

.button {
	border-radius: 15px;
	border-top-right-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	font-size: 24px;
	color: white;
	padding: 10px 15px;
	border: none;
	background-color: #1FDB84 !important;
	cursor: pointer;
}
	.button:active,
	.button:focus {
		outline: none;
	}

/* Button without animation */
.regular:hover {
	box-shadow: 0 8px 34px 0 rgba(31,219,132,0.60);
}

/* Button with animation */
button.fixed {	
	box-shadow: 0 8px 34px 0 white !important;
	transition: all .5s ease !important;
}
	button.fixed:hover {
		box-shadow: 0 8px 34px 0 rgba(31,219,132,0.60) !important;
	}

html

<button class="button regular">
  Regular button
</button>
<button class="button fixed">
  Fixed button
</button>