.primary-button,
.secondary-button,
.danger-button{

    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;

    min-height:56px;

    padding:16px 22px;

    box-sizing:border-box;

    border:none;

    border-radius:18px;

    cursor:pointer;

    text-decoration:none;

    text-align:center;

    font-size:17px;

    font-weight:700;

    font-family:inherit;

    line-height:1.2;

    transition:.25s;

    flex-shrink:0;

}

/* ==========================
   PRIMARY
========================== */

.primary-button{

    background:linear-gradient(
        135deg,
        #E58AB3,
        #F1A6C8
    );

    color:#FFFFFF;

    box-shadow:
        0 4px 10px rgba(229,138,179,.18);

}

.primary-button:hover{

    transform:translateY(-1px);

    box-shadow:
        0 6px 14px rgba(229,138,179,.22);

}

.primary-button:active{

    transform:scale(.98);

}

/* ==========================
   SECONDARY
========================== */

.secondary-button{

    background:#F4F5F8;

    color:#333;

}

.secondary-button:hover{

    background:#ECEEF4;

    transform:translateY(-1px);

}

.secondary-button:active{

    transform:scale(.98);

}

/* ==========================
   DANGER
========================== */

.danger-button{

    background:#E74C3C;

    color:#FFFFFF;

}

.danger-button:hover{

    background:#D63D2E;

    transform:translateY(-1px);

}

.danger-button:active{

    transform:scale(.98);

}

/* ==========================
   LINKS
========================== */

a.primary-button,
a.secondary-button,
a.danger-button{

    color:inherit;

    text-decoration:none;

}

button.primary-button,
button.secondary-button,
button.danger-button{

    appearance:none;

    -webkit-appearance:none;

}