Как создать удивительный эффект для кнопки на сайте | Button Amazing effect HTML, CSS and JavaScript

Кнопки - важнейший элемент веб-дизайна, который стимулирует взаимодействие с пользователем. Добавление визуальной обратной связи, когда пользователь наводит курсор на кнопку, может сделать ваш сайт более привлекательным и удобным для пользователя. В этом уроке мы покажем вам процесс создания стильной кнопки с эффектом изменения цвета при наведении с помощью HTML и CSS.

СКАЧАТЬ

Не стесняйтесь настраивать цвета, размеры и шрифты кнопок в соответствии с дизайном вашего веб-сайта. Вы также можете изучить другие свойства CSS, чтобы улучшить внешний вид кнопки, например добавить закругленные углы или тени.

Вы успешно создали кнопку с эффектом изменения цвета при наведении, используя HTML и CSS. Добавление подобных интерактивных элементов на ваш веб-сайт может улучшить взаимодействие с пользователем и сделать ваш сайт более визуально привлекательным. Этот простой, но эффективный эффект можно применить к различным кнопкам вашего веб-сайта, чтобы стимулировать взаимодействие с пользователем.

Следуя этому руководству, вы приобрели ценные навыки веб-дизайна, которые помогут вам создавать визуально привлекательные и интерактивные пользовательские интерфейсы. Включите этот эффект в кнопки вашего веб-сайта, чтобы создать более динамичный и современный вид.

Надеюсь, это видео будет полезным для вас. Если у вас возникнут какие-либо трудности при создании этого кода, вы можете скачать готовый код, нажав кнопку «СКАЧАТЬ».

Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

HTML КОД:

<a href="#">
  <span class="back one"></span>
  <span class="back two"></span>
  <span class="button">BUTTON</span>
</a>

CSS КОД:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

:root{
    --x: 45deg
}

body{
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    
    
}

a{
    /* border: 1px solid red; */
    position: relative;
    width: 250px;
    height: 90px;
    border-radius: 5px;
    margin: 50px;
}

.back{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(var(--x), red, black, black, blue);
}

.two{
    filter: blur(12px);
}

.button{
    position: absolute;
    border: 1px solid black;
    top: 2px;
    right: 2px;
    left: 2px;
    bottom: 2px;
    background-color: rgba(0, 0, 0, 0.299);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.3rem;
    overflow: hidden;
    
}

.button::before{
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background-color:rgba(255, 255, 255, 0.087);
    transform: skew(30deg);
}

JAVASCRIPT КОД:

let a = document.querySelector('a')

a.addEventListener('mousemove', move =>{
        let x = move.clientX * 2.5;
        a.style.setProperty('--x', x + 'deg');
})