Растягивающаяся кнопка на HTML + CSS
 | |
| Простой эффект для кнопки с эффектом с помощью CSS, который понравился простотой и своим трюком, где при привидение клика, каркас растягивается. Это еще один минимальный и чистый способ добавить еще один аспект на креативность на вашем сайте. Как вы можете догадаться по названию, оно использует эффект растяжения или растяжения при наведении курсора. Есть две анимированные строки вверх и вниз текстового раздела, где все разделы также расширяются в определенном масштабе, чтобы соответствовать растянутому эффекту. Размер шрифта, цвета и стиль также могут быть легко настроены с помощью CSS. Все сделано просто и удобно, где поставлено под класс, что можно вывести отдельно по функций. При открытие страницы или сайта:  Здесь уже видим эффект растягивание знаков, что наведен курсор на кнопку:  Приступаем: HTML Код <div class="anksacom-plments"> <a href="#">Скачать</a> </div> CSS Код .anksacom-plments{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .anksacom-plments { display: block; font-size: 22px; font-family: sans-serif; text-decoration: none; color: #1d1a1a; border-top: 2px solid #2d2929; border-bottom: 2px solid #272525; padding: 8px; letter-spacing: 2px; transition: all .30s; } .anksacom-plments a { text-decoration: none; color: #292525; } .anksacom-plments:hover{ letter-spacing: 12px; } На счет эффект hover, это когда наводим клик, то происходит изменение. То там установлено значение 12 пикселей, можно больше или меньше, все как вам нужно. Также вы можете выставить оттенок цвета, чтоб при растягивание еще и менялась палитра цвета, это просто как вариант, который пригодится для оформление. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |