» »

Меню с эффектом CSS3 нажатия кнопки

Меню с эффектом 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;
}

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

Демонстрация
2019-10-03 Загрузок: 1 Просмотров: 247 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar