Bouton Envoyer animé

649 siddharth_9167_

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 April 2024

Bouton HTML animé

25 February 2026

Bouton de commande animé HTML CSS JavaScript

12 May 2026

Bouton de jeu plein écran HTML/JS

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);
}