Меню с эффектом CSS3 нажатия кнопки
 | |
| Если вы ищете оригинальные по стилистике кнопки, а также красивый эффект нажатие кнопки, где просто интересных кнопки, которые выстроенные в горизонтальном виде. То здесь представлен материал, виде кнопок, что можно выстроить оригинальную навигацию, а также взять для функциональности одну кнопку, что по умолчанию идет по серым дизайном на светлый формат сайта. Это меню расширяется от самой кнопки меню, занимая пространство, которое было обнаружено при нажатии на содержимое страницы. Это меню не из холста, а скорее как расширяющееся поле с наложением контента. Здесь мы используем желеобразную анимацию, созданную с помощью CSS. Используя комбинацию наведение и нажатие клика, то можно отследить появлением пунктов меню. На светлом фоне:  Установочный процесс: Код <a href="/" class="lastipan">zornet.ru</a> <nav> <a href="#home">CSS</a> <a href="#about">ГЛАВНАЯ</a> <a href="#works">СКРИПТЫ</a> <a href="#contact">КОНТАКТ</a> </nav> </header> CSS Код .lastipan { background: url(http://images.vfl.ru/ii/1566497739/b001d564/27624964.png) no-repeat; width: 295px; height: 170px; text-indent: -9999px; display: table; margin: 0 auto 20px; } header { display: table; margin: 20px auto 4px; } nav a { position: relative; top: 0; float: left; cursor: pointer; background: radial-gradient(circle, #ffffff 10%, #c5bcbc); border-radius: 4px; box-shadow: 0px 4px rgba(29, 27, 27, 0.26); margin: 0 10px 0 0; color: #585353; line-height: 36px; text-shadow: 0px 1px #ccc; text-align: center; user-select: none; transition: all 0.1s ease; padding: 0px 18px; text-decoration: none; } nav a:nth-last-child(1) { margin: 0; } nav a:active { box-shadow: 0px 0px rgba(14, 14, 14, 0.2); top: 4px; } Этот материал идет как навигация по сайту, но по своей стилистике такой дизайн больше подойдут под кнопку, что можно поставить под любую функцию, что имеет прекрасный эффект нажатие. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |