.integrate-button__container {
    position: relative;
    text-transform: uppercase;
    font: normal normal bold 16px/21px font-primary;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-primary-300);
    transition: ease-out all 0.5s;
    z-index: 1;
}

a.integrate-button__container {
    cursor: pointer;
}

.integrate-button__container span {
    transition: ease-out all 0.5s;
    color: var(--color-primary-400);
    z-index: 1;
}

.integrate-button__container:hover {
    border-color: var(--color-primary-500);
}

.integrate-button__container:hover span {
    color: var(--color-secondary-100);
}

.integrate-button__container:focus-visible {
    border-color: var(--color-primary-600);
    outline: none;
}

.integrate-button__container:focus-visible span {
    color: var(--color-primary-600);
}

.integrate-button__container:active {
    border-color: var(--color-primary-400);
}

.integrate-button__container:active span {
    color: var(--color-primary-600);
}
 
.integrate-button__content {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: 0;
    border-radius: 100%;
    background-color: var(--color-primary-500);
    transition: ease-out all 0.5s;
}

.integrate-button__container:hover .integrate-button__content {
    max-width: 100%;
    border-radius: 0;
}

.integrate-button__container:active .integrate-button__content {
    background-color: var(--color-primary-400);
}