| Kosten | Пятница, 26 Февраля 2021, 22:18 | Сообщение 1 |
| Кто то скажет, что это простой эффект растягивание кнопки при наведение клика на основу, но здесь все совершенно по другому выстроенный. Вашему вниманию простой и в тоже время популярный эффект 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;
}
Установка завершена!
Демонстрация
| | Страна: (RU) |
| |
