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

Анимированная кнопка обратной связи в CSS

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

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

Установка:

HTML

Код

<button class="kopatential-tagetaudien" type="submit">Отправить</button>

CSS

Код

.kopatential-tagetaudien {
  position:relative;
  top:35%;
  display:inline-block;
  padding:0.5rem 1rem;
  border:2px solid rgba(255,255,255,0.5);
  background:none;
  outline:none;
  -webkit-appearance: none;
  font-size:2rem;
  color:rgba(255,255,255,1);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.5rem;
  text-indent:0.5rem;
  cursor:pointer;
  transition:
  color 1.5s .5s,
  border 3s 1s;

}
.kopatential-tagetaudien:before,
.kopatential-tagetaudien:after {
  content:'';
  position:absolute;
  opacity:0;
  backface-visibility:visible;
  transform-style:preserve-3d;
  perspective:400px;
  transform-origin:50% -50%;
  transform:rotateX(360deg) rotateY(0) translateX(-50%) translateY(0) scale(0.2);
  transition:all 0.5s;
}
.kopatential-tagetaudien:before {
  top:5px;
  left:50%;
  height:3rem;
  background:white;
  border-top:2rem solid #2980b9;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
}
.kopatential-tagetaudien:after {
  top:0;
  left:50%;
  border-top:2rem solid white;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
}
.kopatential-tagetaudien:hover {
  color:rgba(255,255,255,0);
  border:2px solid rgba(255,255,255,0);
  transition:
  color .25s,
  border .25s;
}
.kopatential-tagetaudien:hover:before,
.kopatential-tagetaudien:hover:after {
  opacity:1;
  transform:rotateX(0) rotateY(-10deg) translateX(-50%) translateY(0) scale(1);
}
.fly {
  color:rgba(255,255,255,0);
  border:2px solid rgba(255,255,255,0);
  animation:sended 4s 0.8s forwards;
}
@keyframes sended {
  0% {
  height:2rem;
  width:3.5rem;
  border-top:0;
  border-right:0;
  border-bottom:10px solid white;
  border-left:10px solid white;
  opacity:0;
  transform:rotate(-45deg) translateX(300%) translateY(-500%);
  }
  5% {
  height:2rem;
  width:3.5rem;
  border-top:0;
  border-right:0;
  border-bottom:10px solid white;
  border-left:10px solid white;
  opacity:1;
  transform:rotate(-45deg) translateX(0) translateY(0);
  }
  78% {
  height:2rem;
  width:3.5rem;
  border-top:0;
  border-right:0;
  border-bottom:10px solid white;
  border-left:10px solid white;
  opacity:1;
  transform:rotate(-45deg) translateX(0) translateY(0);
  }
  79% {
  height:2rem;
  width:3.5rem;
  border-top:0;
  border-right:0;
  border-bottom:10px solid white;
  border-left:10px solid white;
  opacity:0;
  transform:rotate(-45deg) translateX(0) translateY(0);
  }
  80% {
  height:auto;
  width:auto;
  color:rgba(255,255,255,0);
  border:2px solid rgba(255,255,255,0);
  opacity:0;
  transform:rotate(0) translateX(0) translateY(0);
  }
  100% {
  height:auto;
  width:auto;
  color:rgba(255,255,255,1);
  border:2px solid rgba(255,255,255,0.5);
  opacity:1;
  transform:rotate(0) translateX(0) translateY(0);
  }
}

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

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

16 Сентября 2018 Загрузок: 1 Просмотров: 1332 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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