<div class="button"> Normal </div>

<div class="button blue"> Blue </div>

<div class="button red"> Red </div>

<div class="button yellow"> Yellow </div>

<div class="button asphalt"> Asphalt </div>

<div class="button orange"> Orange </div>

<div class="button pink"> Pink </div>

.button {
border-radius: 5px;
background-color: #2ecc71;
-webkit-box-shadow: inset 0 -6px 1px rgba(123,123,123,.34);
box-shadow: inset 0 -6px 1px rgba(123,123,123,.34);
color: #fff;
text-align: center;
padding: 10px 50px;
font-size: 42px;
transition: 0.3s;
font-family: arial;
font-weight: bold;
cursor:pointer !important;
display: inline-block;
width: 200px;
}

.button:hover {
border-radius: 5px;
background-color: #34e57f;
-webkit-box-shadow: inset 0 -6px 1px rgba(123,123,123,.34);
box-shadow: inset 0 -6px 1px rgba(123,123,123,.34);
color: #fff;
text-align: center;
padding: 10px 50px;
font-size: 42px;
font-family: arial;
font-weight: bold;
display: inline-block;
width: 200px;
}

.button:active {
border-radius: 5px;
background-color: #29b564;
-webkit-box-shadow: inset 0 5px 0px rgba(123,123,123,.34);
box-shadow: inset 0 5px 0px rgba(123,123,123,.34);
color: #fff;
text-align: center;
padding: 10px 50px;
font-size: 42px;
font-family: arial;
font-weight: bold;
display: inline-block;
width: 200px;
}

h1 {
font-family:sans-serif;
}

.blue {
background:#3498DB;
}
.blue:hover {
background:#3BABF6;
}
.blue:active {
background:#2F87C3;
}
.red {
background:#E74C3C;
}
.red:hover {
background:#FF5643;
}
.red:active {
background:#CD4435;
}
.yellow {
background:#F1C40F;
}
.yellow:hover {
background:#FFD00F;
}
.yellow:active {
background:#CDA60C;
}
.asphalt {
background:#34495E;
}
.asphalt:hover {
background:#425D78;
}
.asphalt:active {
background:#263645;
}
.orange {
background:#E67E22;
}
.orange:hover {
background:#FF8C26;
}
.orange:active {
background:#CD701F;
}
.pink {
background:#9B59B6;
}
.pink:hover {
background:#B166CF;
}
.pink:active {
background:#864D9C;
}