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

Прикольная кнопка с анимацией на CSS3

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

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

1. С самом в теле странице нужно создать блок, где в нем прописываем класс zgukisan-dersan, у которого будет одно значение, это выставить кнопку по центру.

2. Если говорить, как работает внутри, то в самом блоке, вписываем ссылку, у которой будет свой класс lasgderyn-peletrasn для ее стилизации.

Здесь кнопка по умолчанию, может любой оттенок:

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

Это уже когда навели клик и анимация автоматически сработала:

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

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

HTML

Код

<body>
<div class="zgukisan-dersan">
<a href="#" class="lasgderyn-peletrasn">ZORNET.RU</a>
</div>
</body>

CSS

Код

.zgukisan-dersan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lasgderyn-peletrasn {
  border: 3px solid #1e5982;
  font-size: 30px;
  color: #23698c;
  text-decoration: none;
  text-transform: uppercase;
  width: 273px;
  height: 59px;
  display: block;
  text-align: center;
  line-height: 58px;
  font-family: Arial, sans-serif;
  position: relative;
  transition: .5s;
  overflow: hidden;
}
.lasgderyn-peletrasn::before,
.lasgderyn-peletrasn::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: #225a8c;
  top: 0;
  left: -100%;
  opacity: .5;
  transition: .3s;
  z-index: -1;
}
.lasgderyn-peletrasn::after {
  opacity: 1;
  transition-delay: .2s;
}
.lasgderyn-peletrasn:hover {
  color: #f6f8fb;
}
.lasgderyn-peletrasn:hover::before,
.lasgderyn-peletrasn:hover::after {
  left: 0;
}

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

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

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

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

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

Kosten

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