#pre_view
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: black;
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
}

#pre_view button
{
    border: none;
    outline: none;
    background: transparent;
    transition: scale .5s ease;
    width: fit-content;
}

#pre_view button > div
{
    background: #000000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    padding: .3rem 1.35rem .5rem 1.35rem;
    border-radius: .75rem;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .5s ease;
}

#pre_view button:hover
{
    scale: 1.15;
}

#pre_view button > div::before, #pre_view button > div::after
{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: .9rem;
    padding: .15rem .18rem;
    z-index: -1;
    background: conic-gradient(from var(--angle-magic),  #1e80ff, #b832f7, #ff00d4, #1e80ff);
    background-position: 50% 50%;
    animation: magic-angle-rotate 3s linear infinite;
}

@property --angle-magic
{
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes magic-angle-rotate
{
    from { --angle-magic: 0deg; }    
    to { --angle-magic: 360deg; }    
}

#pre_view button > div::after
{
    padding: .45rem .54rem;
    opacity: 50%;
    filter: blur(15px);
}