<button class="button"><span class="button__text">Gradient Button</span></button>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">

body {
background: #efefef;
}

button {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
font-weight: normal;
border: none;
text-align: center;
line-height: normal;
}

.button {
display: block;
width: 350px;
margin: 100px auto;
padding: 20px 30px;
font-size: 25px;
color: #fff;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
border-radius: 5px;
position: relative;
letter-spacing: 2px;
background-color: #ccc;
background: linear-gradient(to top, #3a7d3c, #59c45c);
-webkit-backface-visibility: hidden;
z-index: 1;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
}

.button:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.3em;
background: linear-gradient(to top,#a90000,#ff0000);
transition: opacity 0.5s ease-out;
z-index: 2;
opacity: 0;
}

.button:hover:after {
opacity: 1;
}

.button__text {
position: relative;
z-index: 3;
}