/* Border Green Button */
.button1 {
    padding: 10px 20px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #31a342;
    background: transparent;
    cursor: pointer;
    border: 2px solid #31a342;
    border-radius: 10px;
    transition: 0.3s;
}

/* Full Green Button */
.button2 {
    padding: 10px 20px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    color: #3a3a3a;
    background: #31a342;
    cursor: pointer;
    border: 2px solid #31a342;
    border-radius: 10px;
    transition: 0.3s;
}

/* Border Red Button */
.button3 {
    padding: 10px 20px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #bd2929;
    background: transparent;
    cursor: pointer;
    border: 2px solid #bd2929;
    border-radius: 10px;
    transition: 0.3s;
}

/* Full Red Button */
.button4 {
    padding: 10px 20px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    color: #3a3a3a;
    background: #bd2929;
    cursor: pointer;
    border: 2px solid #bd2929;
    border-radius: 10px;
    transition: 0.3s;
}

.button2:hover, .button1:hover {
    box-shadow: 7px 5px 56px -14px #31a342;
}

.button3:hover, .button4:hover {
    box-shadow: 7px 5px 56px -14px #bd2929;
}

.button2:active, .button1:active, .button3:active, .button4:active {
    transform: scale(0.95);
}