ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект нажатия кнопки с помощью CSS3

Эффект нажатия кнопки с помощью CSS3

Еще одна с виду стандартная кнопка, но здесь идет красивая анимация с эффектом нажатие, что при клике на основу кнопки красиво смотрится. Тем небольшим есть отличие, но здесь если у кого темный ресурс, то изначально под него настроено. Все сделано просто, она идет сразу по всем сторонам. Вам нужно выставить его также аналогично, но потом уже в стилях выставить родною гамму цвета. Очевидной отправной точкой для анимационных эффектов являются кнопки CSS. Каждый эффект четко прописан и использует чистый CSS для анимации.

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

Так изначально идет при открытие страницы или портала:

Как сделать кнопку с эффектом нажатия с помощью CSS

Здесь не просто навели, а нажали на правый клик:

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

HTML

Код

<div class="responsive-navigation">
<a href="http://zornet.ru" class="viganew-tutorials">Нажми на кнопку</a>
</div>

CSS

Код

.responsive-navigation {
  background: none repeat scroll 0 0 #14282f;
  margin: 10px auto;
  width: 385px;
  height: 117px;
  display: table;
}

a.viganew-tutorials {
  background: -moz-linear-gradient(center top , #58564ee, #3e3d39) repeat scroll 0 0 rgba(0, 0, 0, 0);
  border-radius: 5px;
  box-shadow: 0 1px 0 0 #75736e inset, 0 2px 7px #151515;
  color: #f7fbc2;
  cursor: pointer;
  font: 18px verdana;
  margin: 20px auto 9px;
  padding: 19px 25px 19px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 #211f1f;
  text-transform: uppercase;
  vertical-align: bottom;
  z-index: 2;
  display: table;
}

a.viganew-tutorials:active {
  background: -moz-linear-gradient(center top , #2d2c26, #2b2a25) repeat scroll 0 0 rgba(216, 216, 216, 0);
  box-shadow: 0 1px 4px 0 #1b1b1b inset, 0 -1px 0 rgba(21, 20, 20, 0.39) inset, 0 1px 0 #4c4b44;
  padding: 25px 37px 21px;
}

Если вы ищете интересные идеи для репликации в своих собственных проектах, то в этой коллекции обязательно есть что-то для вас. Любой, кто знает немного JavaScript и CSS, может легко выставить эту анимацию для полноценной работы в любом браузере, и также на любом интернет ресурсе.

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

05 Июля 2018 Просмотров: 1728 Комментариев: (0)

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

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

Kosten

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