ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивый эффект при нажатие кнопки на CSS

Красивый эффект при нажатие кнопки на CSS

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

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

Так будет выглядеть после как установили:

Трюк эффекта нажатие кнопки CSS

Приступаем к установки:

HTML

Код

<a class="gasetolan" role="button">Сайт Zornet.Ru</a>

CSS

Код

.gasetolan {
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #dcd9d9 50%, #b5b5b5 74%, #b3adad 82%, #d0c9c9 100%);
  border: 1px solid rgba(14, 14, 14, 0.16);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(243, 238, 238, 0.2), 0 5px 12px -4px rgba(8, 8, 8, 0.85), 0 3px 10px rgba(14, 14, 14, 0.05);
  cursor: default;
  cursor:pointer;
  display: inline-block;
  font-family: arial, sans-serif;
  font-size: 14px;
  padding: 9px 17px 9px;
  position: relative;
  text-shadow: 0 1px 0 rgba(232, 232, 232, 0.35);
  -webkit-user-select: none;
}

.gasetolan:active {
  box-shadow:
  inset 0 1px 0 rgba(245, 240, 240, 0.2),
  0 1px 0 0 rgba(12, 12, 12, 0.35),
  0 0 1px rgba(16, 16, 16, 0.09);
  top: 1px;
  }

Это очень простой и запоминающий трюк.

Демонстрация

07 Сентября 2018 Просмотров: 1572 Комментариев: (0)

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

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

Kosten

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