.btn {
    font-size: 1.2rem;
    padding: 0.3em 0.5em;
    min-width: 3em;
    background: hsl(0, 0%, 39%);
    color: hsl(0, 0%, 100%);
    box-shadow: 0 1px 1px 0 hsl(0, 0%, 0%);
    border: 0;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
        background: hsl(0, 0%, 31%);
    }
}

.btn--green {
    background: hsl(106, 92%, 41%);

    &:hover {
        background: hsl(106, 92%, 36%);
    }
}

.btn--red {
    background: hsl(357, 100%, 47%);

    &:hover {
        background: hsl(357, 100%, 41%);
    }
}

.btn {
    font-size: 1.2rem;
    padding: 0.3em 0.5em;
    min-width: 3em;
    background: hsl(0, 0%, 45%);
    color: hsl(0, 0%, 100%);
    box-shadow: 0 1px 1px 0 hsl(0, 0%, 0%);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition-property: transform, box-shadow;
    transition-duration: .1s;
    transition-timing-function: ease-out;

    &:hover {
        background: hsl(0, 0%, 40%);
    }

    &:active {
        transform: translateY(1px);
        box-shadow: none;
    }
}

.btn--green {
    background: hsl(106, 92%, 41%);

    &:hover {
        background: hsl(106, 92%, 36%);
    }
}

.btn--red {
    background: hsl(357, 100%, 47%);

    &:hover {
        background: hsl(357, 100%, 41%);
    }
}

Add animation to button press
Add animation to button press
