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

Кнопка с анимацией движение для сайта CSS

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

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

Так в реальности по умолчанию:

Кнопка для сайта CSS3 + анимация

Здесь при наведение на ее клика:

Как через CSS заставить кнопку реагировать на нажатие

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

HTML

Код

<a href="http://zornet.ru" class='somansover-tekend overproduced'>Здесь подарок</a>

CSS

Код

.somansover-tekend {
  animation-iteration-count: infinite;
  border: 2px solid #0e2448;
  border-radius: 0.4em;
  color: #112044;
  display: table;
  font: 500 17px verdana;
  letter-spacing: 1px;
  margin: 9px auto;
  padding: 9px 21px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.4s linear 0s;
}
.somansover-tekend:hover {
  animation: 0s ease 0s normal none 1 running none;
  background: none repeat scroll 0 0 #16185d;
  color: #f2f2f5;
}

.overproduced {
  animation-duration: 0.75s;
  animation-name: jump;
}

@keyframes jump {
0% {
  transform: scale(1, 1) translate(0px, 0px);
}
30% {
  transform: scale(1, 0.8) translate(0px, 10px);
}
75% {
  transform: scale(1, 1.1) translate(0px, -25px);
}
100% {
  transform: scale(1, 1) translate(0px, 0px);
}
}

Как видите, что все исполнено на стилистике, сто не каким боком не будет грузить страницы сайта.

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

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

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

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

Kosten

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