header

Футуристическая анимированная кнопка

<div class="wrapper">
    <button class="button1">
        <i></i><i></i>
        <span>button</span>
    </button>
</div>
<script>
    let btn = document.querySelector('button');
    btn.addEventListener('mousemove', e => {
        let rect = e.target.getBoundingClientRect();
        let x = e.clientX *2 - rect.left;
        btn.style.setProperty('--x', x + 'deg');
    })
</script>

:root{--x: 45deg;}
.button1{position:relative;width:150px;height:55px;border-radius:5px;background:transparent;cursor:pointer;}
.button1 i{position:absolute;inset:-2px;display:block;border-radius:5px;}
.button1 i, .button1 i:nth-child(2){background:linear-gradient(var(--x),#00ccff,#0e1538,#0e1538,#d400d4);}
.button1 i:nth-child(2){filter:blur(10px);}

.button1 span{
position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;
display:flex;justify-content:center; align-items:center;
text-transform:uppercase;color:#fff;letter-spacing:2px;
border:1px solid #040a29;border-radius:3px; background:rgba(14,21,56,.65);
}

Возврат к списку