.button {
    display: inline-block;
    border: none;
    border-radius: 0.5em;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border 0.2s;
    outline: none;
}

.button-header {
    background: #2563eb;
    color: #fff;
    font-size: 1rem;
    padding: 0.4em 1.1em;
}
.button-header:hover, .button-header:focus {
    background: #1d4ed8;
}
.button-footer {
    background: transparent;
    color: #ecf0f1;
    border: 2px solid #2D5D4A;
    font-size: 0.93rem;
    padding: 0.35em 0.95em;
}
.button-footer:hover, .button-footer:focus {
    background: #2D5D4A;
    color: #fff;
    border-color: #2563eb;
}
.button-body-a {
    background: #f59e42;
    color: #fff;
    font-size: 1.07rem;
    padding: 0.7em 1.4em;
}
.button-body-a:hover, .button-body-a:focus {
    background: #d97706;
}
.button-body-b {
    background: #fff;
    color: #2563eb;
    border: 2px solid #2563eb;
    font-size: 1.07rem;
    padding: 0.7em 1.4em;
}
.button-body-b:hover, .button-body-b:focus {
    background: #2563eb;
    color: #fff;
}
@media (max-width: 600px) {
    .button-header, .button-footer, .button-body-a, .button-body-b {
        font-size: 1.12rem;
        padding: 0.95em 1.6em;
    }
}