🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

Efecto CSS para botones: ampliación suave al hacer hover con scale()

📝 Uso

Esta plantilla se utiliza cuando deseas dar un efecto de ampliación ligera a un botón cuando se pasa el ratón sobre él.

📘 Explicación

Este código utiliza transform: scale() para lograr el efecto de ampliar ligeramente el botón cuando se pasa el ratón sobre él. La propiedad transition asegura una transformación suave.

🔹 Código parcial

<style>
  .hover-scale-btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .hover-scale-btn:hover {
    transform: scale(1.1); /* Ligera ampliación al pasar el ratón */
  }
</style>

💻 Código completo

<button class="hover-scale-btn">
  Botón que se amplía ligeramente al pasar el ratón
</button>

<style>
  .hover-scale-btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .hover-scale-btn:hover {
    transform: scale(1.1); /* Ligera ampliación al pasar el ratón */
  }
</style>
¡Copiado!

✨ Técnicas Avanzadas para Efectos de Ampliación

El efecto de ampliación al pasar el cursor no solo se aplica a botones, sino también a muchos otros elementos. Ajustando el valor de transform: scale(), puedes lograr desde una ampliación sutil como scale(1.05) hasta un efecto más dramático como scale(1.5).

⏱ Ajuste de la Transición

Si deseas modificar la velocidad de la animación, ajusta la propiedad transition. Por ejemplo, transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); proporciona un movimiento más dinámico. Con la función cubic-bezier, puedes crear curvas de aceleración personalizadas.

🎯 Efectos Combinados

Al combinar el efecto de ampliación con otros efectos, puedes lograr una presentación más rica. Por ejemplo, transform: scale(1.1) rotate(5deg); aplica una ligera rotación junto con la ampliación. Si deseas agregar un cambio de color de fondo, usa múltiples propiedades como transition: transform 0.3s ease, background-color 0.3s ease;.

Ten en cuenta que si el nivel de ampliación es demasiado alto (scale(1.5) o más), podría superponerse a otros elementos o descomponer el diseño. Además, como la propiedad transform mantiene el espacio original del elemento, es ideal para animaciones que no afecten al diseño circundante.

Esta técnica es útil para miniaturas en interfaces tipo tarjeta, ítems del menú de navegación, listas de productos y otros elementos interactivos que buscan atraer la atención del usuario. Al agregar movimientos moderados, mejorarás la experiencia de usuario general del sitio web.

Plantillas Relacionadas