• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Анимированная кнопка отправка почты в CSS (Flatt кнопка для отправки письма или сообщение на почту)
Анимированная кнопка отправка почты в CSS
Kosten
Воскресенье, 07 Октября 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Кнопка для отправки письма на электронный ящик, так как она с анимацией и эффектами, где после нажатие происходят красивые эффекты на CSS. Где с начало просто нажимаете и появляется конверт, который улетает в правую сторону, и сразу после этого появляется галочка. Это для современного сайта будет отличным решение, а где-то просто его дополнит по своей оригинальной виртуальности.

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



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

HTML

Код
<button class="dekipoldag-kutensa" type="submit">Отправить</button>

CSS

Код
.dekipoldag-kutensa {
  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;
  
}
.dekipoldag-kutensa:before,
.dekipoldag-kutensa: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;
}
.dekipoldag-kutensa:before {
  top:5px;
  left:50%;
  height:3rem;
  background:white;
  border-top:2rem solid #2980b9;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
}
.dekipoldag-kutensa:after {
  top:0;
  left:50%;
  border-top:2rem solid white;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
}
.dekipoldag-kutensa:hover {
  color:rgba(255,255,255,0);
  border:2px solid rgba(255,255,255,0);
  transition:
    color .25s,
    border .25s;
}
.dekipoldag-kutensa:hover:before,
.dekipoldag-kutensa: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);
  }
}
.fly:before,
.fly:after {animation:flyout .6s forwards;}
@keyframes flyout {
  0% {
    opacity:1;
    transform:rotateX(0) rotateZ(0) translateX(-50%) translateY(0) scale(1);
  }
  33% {
    opacity:0.66;
    transform:rotateX(0) rotateZ(-5deg) translateX(-100%) translateY(0) scale(1);
  }
  100% {
    opacity:0;
    transform:rotateX(0) rotateZ(0) translateX(1000%) translateY(0) scale(1);
  }
}

JS

Код
$(".dekipoldag-kutensa").on("click touchstart", function () {
    $(this).addClass("fly");
    that = this
    setTimeout(function() {
        $(that).removeClass("fly");
    }, 5400)
});

Если основном создавали на формате Gif, то сейчас все моно сделать при помощи стилистики, что будет намного красивее выглядит на интернет сайте.

Демонстрация
Прикрепления: 3333558.png (4.1 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Анимированная кнопка отправка почты в CSS (Flatt кнопка для отправки письма или сообщение на почту)
  • Страница 1 из 1
  • 1
Поиск: