Dê vida aos seus botões! Aprenda a animá-los de maneira curiosa

Aguila SEO · 10/07/2022

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

Inserir CODE, HTML ou PHP:

https://wonderboxperu.com/products/manta-de-invierno-para-mascotas?variant=42528941965497

gracias

Dainielpro27 · 10/07/2022

también me gustaría saber como hacerlo

Karasu · 10/07/2022

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:

Tutvgratis · 10/07/2022

Karasu disse:
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:

Gracias por la info, de grande quiero ser como tu

Aguila SEO · 11/07/2022

Karasu disse:
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:

gracias por la información, lo voy a intentar

Dê vida aos seus botões! Aprenda a animá-los de maneira curiosa

Aguila SEO

Dainielpro27

Karasu

Tutvgratis

Aguila SEO

Tópicos similares