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

Кнопки с удивительными эффектами CSS

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

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

Так реально они по умолчанию выглядят, где были проверены на работоспособность.

Отличные эффекты анимации с помощью CSS3

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

HTML

Код

<a href="http://zornet.ru">ZORNET.RU №1
ZORNET.RU №2
ZORNET.RU №3
ZORNET.RU №4

CSS

Код

.astulatest-upcoming {text-align:center}
.astulatest-upcoming span {
  display: inline-block;
  margin: 12px;
  padding: 19px 28px;
  cursor: pointer;
  border-radius: 7px;
  color: #f7f6f6;
  transition: .2s linear;
  text-shadow: 0 1px 0 #736e6e;
}
.astulatest-upcoming span:nth-child(1) {
  background: #421105;
}
.astulatest-upcoming span:nth-child(1):hover {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #3A2F28;
}
.astulatest-upcoming span:nth-child(2) {
  background: #1b9015;
}
.astulatest-upcoming span:nth-child(2):hover {
  box-shadow: 200px 0 0 0 rgba(23, 21, 21, 0.64) inset;
}
.astulatest-upcoming span:nth-child(3) {
  background: #c17e17;
}

.astulatest-upcoming span:nth-child(3):hover {
  box-shadow: 0 0 0 2px #6b450b inset, 0 0 0 4px white inset;
}

.astulatest-upcoming span:nth-child(4) {
  background: #2b4ea0;
  position: relative;
  top: 0;
  left: 0;
}
.astulatest-upcoming span:nth-child(4):hover {
  box-shadow: 2px 2px white, 4px 4px #1b3c8a;
  top: -3px;
  left: -3px;
}

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

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

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

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

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

Kosten

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