¡Dale vida a tus botones! Aprende a animarlos de manera curiosa

  • Autor Autor Aguila SEO
  • Fecha de inicio Fecha de inicio
Aguila SEO

Aguila SEO

Lambda
Social Media
Verificado
Verificado por Whatsapp
¡Ha verificado su Paypal!
Hola,

vi un botón bien curioso, me ayudan a saber como animarlo de esa manera por favor. El botón dice: pide ahora antes que se acaben

Insertar CODE, HTML o PHP: 
https://wonderboxperu.com/products/manta-de-invierno-para-mascotas?variant=42528941965497

gracias
 
también me gustaría saber como hacerlo
 
Hola amigo que tal. Eso lo puedes lograr usando los keyframes de css. Aquí un ejemplo sencillo:
HTML: 
<style>
.btn-prueba {
  padding: 12px 32px;
  font-size: 20px;
    animation: animar-btn 1s infinite linear;
}

@keyframes animar-btn {
  0% {
    transform: translateY(-5px)
  } 50% {
    transform: translateY(0)
  } 100% {
    transform: translateY(-5px)
  }
}
</style>

<button class='btn-prueba'>Botón de ejemplo</button>


Aquí puedes encontrar info sobre los keyframes: https://developer.mozilla.org/es/docs/Web/CSS/@keyframes
y aquí un demo:
 
Karasu dijo:
Hola amigo que tal. Eso lo puedes lograr usando los keyframes de css. Aquí un ejemplo sencillo:
HTML: 
<style>
.btn-prueba {
  padding: 12px 32px;
  font-size: 20px;
    animation: animar-btn 1s infinite linear;
}

@keyframes animar-btn {
  0% {
    transform: translateY(-5px)
  } 50% {
    transform: translateY(0)
  } 100% {
    transform: translateY(-5px)
  }
}
</style>

<button class='btn-prueba'>Botón de ejemplo</button>


Aquí puedes encontrar info sobre los keyframes: https://developer.mozilla.org/es/docs/Web/CSS/@keyframes
y aquí un demo:
Hacer clic para expandir...

Gracias por la info, de grande quiero ser como tu
 
Karasu dijo:
Hola amigo que tal. Eso lo puedes lograr usando los keyframes de css. Aquí un ejemplo sencillo:
HTML: 
<style>
.btn-prueba {
  padding: 12px 32px;
  font-size: 20px;
    animation: animar-btn 1s infinite linear;
}

@keyframes animar-btn {
  0% {
    transform: translateY(-5px)
  } 50% {
    transform: translateY(0)
  } 100% {
    transform: translateY(-5px)
  }
}
</style>

<button class='btn-prueba'>Botón de ejemplo</button>


Aquí puedes encontrar info sobre los keyframes: https://developer.mozilla.org/es/docs/Web/CSS/@keyframes
y aquí un demo:
Hacer clic para expandir...

gracias por la información, lo voy a intentar
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba