¿Puede decirme cómo mostrar el texto lentamente al pasar el botón? Intenté usar transition:all 5s; pero me enfrento a un problema: mi texto viene de abajo a la derecha . Sé que el texto no tiene el ancho adecuado debido a que viene de abajo y cuando el ancho está disponible, aparece a la derecha.
¿Es posible mostrar solo cuando el ancho está disponible? para que el usuario no vea que el texto viene de abajo hacia la derecha.
aquí está mi código https://jsbin.com/nividexoti/edit?html,css,output
button { width: 30px; height: 30px; } button span { display: none; } button:hover { width: 80px; transition: all 5s; } button:hover span { display: inline; } <div> <button> <i>||</i> <span>pause<span> </button> </div>Puede agregar opacity:0 para span el elemento del button y, al pasar el hover , aplicar opacity:1 con transition . Consulte: https://jsbin.com/nozomakuru/1/edit?html,css,salida
Puede usar flexbox y configurar el overflow: hidden en el botón:
button { /* Added */ display: flex; align-items: center; gap: 12px; overflow: hidden; /* ----- */ width: 30px; height: 30px; } button:hover { width: 80px; transition: all 5s; } <div> <button> <i>||</i> <span>pause</span> </button> </div>Puede configurar un retraso de animación que solo aparecerá una vez que sea lo suficientemente grueso y jugar con la opacidad:
button { width: 30px; height: 30px; transition: all 5s; } button span { display: none; } button:hover { width: 80px; } button:hover span { display: inline; opacity: 0; animation-name: appear; animation-duration: 100ms; animation-delay: 2s; animation-fill-mode: forwards; } @keyframes appear { from { opacity: 0; position: absolute; } to { opacity: 1; position: static; } } <button> <i>||</i> <span>pause</span> </button>