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


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

Где по стилистика стандартная кнопка, но как можно заметить, что по всем сторонам идет обвод на 1 или 2 пикселя, вот он как раз и будет работать под эффектом. А основа кнопка с ключевым словом остается по месту, где изначально идет по умолчанию.

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



2. С наведением клика:



Установка:

HTML

Код
<button class="zasetul-asdekol">ZORNET.RU</button>

CSS

Код
.zasetul-asdekol {
  -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: 100px;
    height: 30px;
    cursor: pointer;
    border: 3px solid #2f2d2d;
    box-shadow: 0 0 0 #272626;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 2s;
}

button:hover {
    color: white;
    background: transparent;
    box-shadow: 0 5px 0 rgba(0,0,0,0.9), 0 10px 0 rgba(0,0,0,0.8), 0 15px 0 rgba(0,0,0,0.7), 0 20px 0 rgba(0,0,0,0.6), 0 25px 0 rgba(0,0,0,0.5), 0 30px 0 rgba(0,0,0,0.4), 0 35px 0 rgba(0,0,0,0.3), 0 40px 0 rgba(0,0,0,0.2), 0 45px 0 rgba(0,0,0,0.1),
  0 -5px 0 rgba(0,0,0,0.9), 0 -10px 0 rgba(0,0,0,0.8), 0 -15px 0 rgba(0,0,0,0.7), 0 -20px 0 rgba(0,0,0,0.6), 0 -25px 0 rgba(0,0,0,0.5), 0 -30px 0 rgba(0,0,0,0.4), 0 -35px 0 rgba(0,0,0,0.3), 0 -40px 0 rgba(0,0,0,0.2), 0 -45px 0 rgba(0,0,0,0.1);
}

button:focus {
    outline: none;
}

Установка завершена!

Демонстрация
Прикрепления: 2051344.png(6.7 Kb) · 0501660.png(15.1 Kb) · grad-css.zip(2.8 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Плавный эффект растягивание кнопки в CSS (Стильно оригинальный и популярный эффект CSS для кнопки)
  • Страница 1 из 1
  • 1
Поиск: