Bouton Envoyer animé

888 siddharth_9167_

Ouvrir dans l'éditeur Publiez votre code

Recommandé

31 July 2025

Exemple de bouton néon HTML

20 August 2024

Galerie de sites animée et 3D

28 January 2025

bouton

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