Botón de envío animado

479 siddharth_9167_

Abrir en el editor Publica tu código

Recomendado

15 September 2024

Vídeo de fondo

17 December 2025

Barra de navegación de iconos inferior con Tailwind CSS

29 December 2025

Diseño de tarjeta HTML: fragmento de sitio web en francés

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