.button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: none;

    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: background-color 300ms, color 300ms, box-shadow 300ms;
}

button svg path {
    transition: fill 300ms;
}

.button--blue {
    background-color: #0093dd;
    box-shadow: 0 0 0 1px #0093dd;
    color: #fff;
}
.button--blue:hover {
    background-color: transparent;
    color: #0093dd;
}

.button--blue:hover svg path {
    fill: #0093dd;
}
.button--blue:hover {
    background-color: transparent;
    color: #0093dd;
}

.button--dark-blue {
    background-color: #01336f;
    box-shadow: 0 0 0 1px #01336f;
    color: #fff;
}
.button--dark-blue:hover {
    background-color: transparent;
    color: #01336f;
}