Fancy Buttons

Beaver Builder Layout CSS

:root  {
    --fl-bg: #020617;
    --fl-border: #4f46e5;
    --fl-border-soft: rgba(79, 70, 229, 0.25);
    --fl-border-strong: rgba(129, 140, 248, 0.9);
    --fl-text: #e5e7eb;
    --fl-radius: 999px;
    --fl-padding-x: 1.4rem;
    --fl-padding-y: 0.7rem;
    --fl-speed: 2.2s;
}
.border-sheen  {
    position: relative;
    display: inline-block;
}
.fl-builder-content .border-sheen a.fl-button  {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}
.border-sheen a.fl-button  {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    z-index: 1;
}
.border-sheen a.fl-button::before, .border-sheen a.fl-button::after  {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
.border-sheen a.fl-button::before  {
    border: 4px solid var(--fl-border-soft);
}
.border-sheen a.fl-button::after  {
    background: linear-gradient( 120deg, transparent 0%, transparent 20%, var(--fl-border) 40%, var(--fl-border-strong) 50%, var(--fl-border) 60%, transparent 80%, transparent 100% );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    animation: fl-sheen var(--fl-speed) linear infinite;
    opacity: 0.9;
}
.border-sheen a.fl-button:hover::after  {
    opacity: 1;
}
@keyframes fl-sheen  {
    0%  {
        background-position: 0% 50%;
    }
    100%  {
        background-position: 100% 50%;
    }
}