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

Анимация кнопок при клике на чистом CSS3

Подборка кнопок с потрясающем эффектом, которые производятся при нажатии. Здесь представлено 4 разных анимации, что отлично созданные. На одной найдете, что-то похожее на эффект пульсации, другие идут в плавном режиме, по разным сторона. Это когда вы навели, то не происходит, стоит только сделать клик, то автоматически срабатывает эффект. Где такая кнопка подойдет по своему стилю на разные тематические ресурсы.

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

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

Проверяя на работу анимации, то вот как пример:

1. В ярком оттенке цвета;

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

2. В синей гамме;

Потрясающие эффекты для кнопок при нажатии

3. В алой палитре цвета;

Эффект нажатия кнопки CSS

4. Темно синий цвет, на котором эффектно смотрится анимация;

Эффект пульсации при клике

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

HTML

Код

<div class="keyboages begun left">ZORNET.RU</div>
  <div class="keyboages atusexpecomeg left">ZORNET.RU #1</div>
  <div class="keyboages largerukin left">ZORNET.RU #2</div>
  <div class="keyboages karvested left">ZORNET.RU #3</div>

CSS

Код

.keyboages {
  margin: 18px auto;
  position: relative;
  font-size: 27px;
  color: #f7f7f7;
  padding: 19px;
  width: 197px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  border: 2px solid #fffbfb;
  box-shadow: 0px 5px 12px rgba(64, 58, 58, 0.41), 0px 7px 25px -12px rgba(158, 150, 150, 0.05);
  border-radius: 57px;
}

.keyboages:nth-of-type(1) {
  background-color: #1aab57;
}
.keyboages:nth-of-type(2) {
  background-color: #2176af;
}
.keyboages:nth-of-type(3) {
  background-color: #c53829;
}
.keyboages:nth-of-type(4) {
  background-color: #1c1f5d;
}
.keyboages.left:after {
  left: 0;
}
.keyboages.right:after {
  right: 0;
}
.keyboages.begun:after {
  content: "";
  background: #f7f7f7;
  display: block;
  position: absolute;
  width: 200%;
  height: 200%;
  top: -5%;
  border-radius: 75px;
  margin-left: -28%;
  opacity: 0;
  transition: all 0.75s ease-in-out;
}
.keyboages.begun.right:after {
  content: "";
  background: #fff;
  display: block;
  position: absolute;
  width: 200%;
  height: 200%;
  top: -5%;
  border-radius: 50px;
  margin-right: -30%;
  opacity: 0;
  transition: all 0.75s ease-in-out;
}
.keyboages.begun:active:after {
  width: 0px;
  opacity: 1;
  transition: 0s;
}
.keyboages.largerukin:after {
  content: "";
  background: #fff;
  display: block;
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0;
  opacity: 0;
  transition: all 0.75s ease-in-out;
}
.keyboages.largerukin:active:after {
  width: 0px;
  opacity: 1;
  transition: 0s;
}
.keyboages.atusexpecomeg:after {
  content: "";
  background: #f7f7f7;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  transition: all 0.75s ease-in-out;
}
.keyboages.atusexpecomeg:active:after {
  width: 0px;
  opacity: 2;
  transition: 0s;
}

.keyboages.karvested:after {
  content: "";
  background: #f9f9f9;
  position: absolute;
  width: 185px;
  height: 185px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  margin: auto;
  border-radius: 75%;
  transform: scale(1);
  transition: all 0.75s ease-in-out;
}
.keyboages.karvested:active:after {
  transform: scale(0);
  opacity: 1;
  transition: 0s;
}

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

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

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

29 Июня 2018 Загрузок: 1 Просмотров: 4548 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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