• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Необычная анимация кнопок на HTML + CSS (Оригинальная кнопка для сайта с различными эффектами CSS)
Необычная анимация кнопок на HTML + CSS
Kosten
Понедельник, 15 Февраля 2021 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Это яркая по своему оттенку цвета анимационная кнопка, где вместо оттенка мы в стилях пропишем изображение, которое увеличится, что при наведение будет выдавать красивый вид. Такой стиль отлично смотрится на аналогичной палитре, а также можно видеть на темном фоне. Где изначально она идет мрачная, но только стоит навести клик, как она начинается светиться, что безусловно красиво и оригинально смориться.

Если по умолчанию:



Такой вид с наведением клика:



HTML

Код
<button class="kawebsita-bemeanus"></button>

CSS

Код
.kawebsita-bemeanus {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button, button:before {
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    width: 150px;
    height: 50px;
    cursor: pointer;
    font-family: 'Play', sans-serif;
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 25px;
    background-image: url("https://assets.codepen.io/3305358/hazard-stripes-wallpaper.jpg");
    background-size: 150%;
    background-position: left;
    transition: 1s;
}

button:before {
    width: 150px;
    height: 50px;
    content: 'ZorNet.Ru';
    background: rgba(0,0,0,0.6);
    border-radius: 25px;
    position: absolute;
    transition: 500ms;
}

button:hover:before {
    background: rgba(0,0,0,0);
    text-shadow: 1px 1px 1px black;
}

button:hover {
    background-position: center;
    box-shadow: 0px 0px 10px rgba(232, 218, 26, 0.5);
}

button:focus {
    outline: none;
}

На этом все, также изображение можно взять в прикрепленном архиве.

Демонстрация

Скачать
Прикрепления: 5575029.png (21.0 Kb) · 4051031.png (25.7 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Необычная анимация кнопок на HTML + CSS (Оригинальная кнопка для сайта с различными эффектами CSS)
  • Страница 1 из 1
  • 1
Поиск: