• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML коды для сайта » Кнопка на чистом CSS с красивым эффектом (Темно светлая кнопка на чистой стилистике HTML + CSS)
Кнопка на чистом CSS с красивым эффектом
Kosten
Дата: Понедельник, 2021-02-15, 21:40 | Сообщение 1
Онлайн
Администраторы
Сообщений:31744
Награды: 65


Очень интересный эффект смены оттенки цвета, что произойдет с наведением курсора на основной каркас анимированной кнопки. По умолчанию она идет в светлой гамме, где после чего нам нужно сделать клик скачать или перейти. И здесь вы только навели, то по обе стороны появляются 2 темно светлых круга, которые сталкиваются по центру, и после светлой палитры, эта аналогичная кнопка становится темной. Здесь само интересное изменение, что на других вариантах не разу не встречал.

При открытие страницы:



Здесь наведен клик, но лучше на demo странице его, как анимацию рассматривать.



HTML

Код
<button class="miconve-sionson"><span>ZorNet.Ru</span></button>

CSS

Код
.miconve-sionson {
  -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 {
    width: 150px;
    height: 50px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

button span {
    color: black;
    transition: 1s;
}

button:before, button:after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background: transparent;
    z-index: -1;
    transition: 500ms;
}

button:before {
    transform: translateX(-90px);
}

button:after {
    transform: translateX(90px);
}

button:hover:before, button:hover:after {
    background: black;
    transform: translateX(0px);
    animation: expand 500ms 500ms ease forwards;
}

button:hover span {
    color: white;
}

button:focus {
    outline: none;
}

@keyframes expand{
    to{
  height: 50px;
  width: 150px;
  border-radius: 5px;
    }
}

Установочный процесс завершен.

Демонстрация
Прикрепления: 1260519.png(7.3 Kb) · 4072146.png(6.0 Kb) · unnamed-css3.zip(3.0 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML коды для сайта » Кнопка на чистом CSS с красивым эффектом (Темно светлая кнопка на чистой стилистике HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: