Bouton Envoyer animé

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

18 August 2023

Animation de bouton gratuite CSS

HTML

CSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f0f1a;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.send-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #1e1e3f, #5b3cc4);
  color: white;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(91, 60, 196, 0.6);
}

.plane {
  width: 18px;
  height: 18px;
  fill: white;
  transition: transform 0.3s ease;
}

.send-btn:hover .plane {
  transform: translateX(4px);
}

/* Flying Animation */
@keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: translate(80px, -40px) rotate(25deg);
    opacity: 0.7;
  }
  60% {
    transform: translate(100px, -60px) rotate(45deg);
    opacity: 0;
  }
  61% {
    transform: translate(-60px, 40px) rotate(-120deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}

.fly {
  animation: fly 1.5s cubic-bezier(0.65, -0.2, 0.2, 1.3);
}

Bouton Envoyer animé

Recommandé

Code de bouton brillant

Lien animé en survol

Animation de bouton gratuite CSS

HTML

CSS

JS

Recommandé

Code de bouton brillant

Lien animé en survol

Animation de bouton gratuite CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS