Teoría
Teoría

Efectos al pasar el cursor: escala y opacidad

Crearemos un segundo botón con un efecto diferente: al pasar el cursor, el ícono crecerá y se volverá completamente transparente. Al mismo tiempo aparecerá en su lugar el bloque oculto del precio, .hidden.

Usaremos transiciones suaves para cambiar opacity y transform: scale.

La propiedad opacity controla la opacidad de un elemento y acepta valores entre 0 y 1. Con 0, el elemento es completamente transparente, es decir, invisible. Con 1, es completamente opaco, es decir, visible.

opacity: 0;   /* Elemento transparente */
opacity: 0.5; /* Elemento semitransparente */
opacity: 1;   /* Elemento opaco */

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Efectos al pasar el cursor: escala y opacidad</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="buttons"> <button class="btn-green" type="button"> <img class="icon" src="icons/reload-6x-white.png" alt="Ícono de recarga"> Actualizar </button> <button class="btn-yellow" type="button"> <span class="hidden">25<img src="icons/dollar-6x-white.png" alt="Ícono de dólar"></span> <img class="icon" src="icons/cart-6x-white.png" alt="Ícono de carrito"> Comprar </button> </div> </body> </html>

CSS

body { margin: 0; padding: 0; font-family: "Arial Narrow", "Arial", sans-serif; background-color: #f5f5f5; } .buttons { width: 400px; margin: 50px auto; padding: 10px 20px; text-align: center; background-color: white; box-shadow: 0 0 3px #cccccc; } button { position: relative; width: 300px; height: 60px; margin: 20px auto; padding: 0; font-size: 22px; text-align: center; color: white; border: none; outline: none; cursor: pointer; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.4s ease-in-out; } button:active { top: 1px; box-shadow: none; } .icon { position: absolute; left: 20px; } .hidden { position: absolute; opacity: 0; } .hidden img { width: 24px; height: 24px; margin-left: 5px; vertical-align: top; } .btn-green { background-color: #1abc9c; border-bottom: 2px solid #12ab8d; box-shadow: inset 0 -2px #12ab8d; } .btn-yellow { background-color: #f1c40f; border-bottom: 2px solid #e2b607; box-shadow: inset 0 -2px #e2b607; } .btn-green .icon { width: 24px; height: 24px; transition: all 0.4s ease-in-out; } .btn-green:hover .icon { transform: rotate(360deg) scale(1.2); } .btn-yellow .icon { width: 32px; height: 32px; transition: all 0.4s ease-in-out; } .btn-yellow:hover .hidden { left: 20px; transition: opacity 0.2s ease-in-out; } .btn-yellow:hover .icon { }

ObjetivosRealizado

Asigna opacity: 1 a .btn-yellow:hover .hidden.
Asigna una transformación scale con el valor 10 a .btn-yellow:hover .icon.
Asigna también opacity: 0 a ese ícono.

Después de cada cambio, pasa el cursor sobre el botón amarillo para comprobar el efecto.