.btn {
    display: inline-block;
    position: relative;
    margin: 20px;
    padding: 15px 50px;
    border-radius: 5px;
    font-size: 22px;
    text-decoration: none;
    color: #fff;
}

.btn:active {
    transform: translate(0px, 5px);
    -webkit-transform: translate(0px, 5px);
    box-shadow: 0 1px 0 0;
}

.btn:hover {
    cursor: pointer;
}

.blue {
    background-color: #6799fc;
    box-shadow: 0 5px 0 0 #1861f0;
}

.blue:hover {
    background-color: #7da7f9;
}

.green {
    background-color: #8fcf50;
    box-shadow: 0 5px 0 0 #539416;
}

.green:hover {
    background-color: #9bdb5b;
}

.red {
    background-color: #e74c3c;
    box-shadow: 0 5px 0 0 #CE3323;
}

.red:hover {
    background-color: #FF6656;
}

.purple {
    background-color: #9b59b6;
    box-shadow: 0 5px 0 0 #82409D;
}

.purple:hover {
    background-color: #B573D0;
}

.orange {
    background-color: #e67e22;
    box-shadow: 0 5px 0 0 #CD6509;
}

.orange:hover {
    background-color: #FF983C;
}

.yellow {
    background-color: #f1c40f;
    box-shadow: 0 5px 0 0 #D8AB00;
}

.yellow:hover {
    background-color: #FFDE29;
}