.wrapper { position: fixed; top: 40%; right: 15px; display: flex; flex-direction: column; gap: 15px; z-index: 9999; } .wrapper .button { position: relative; display: flex; align-items: center; justify-content: flex-start; height: 50px; width: 50px; text-decoration: none; background: #fff; border-radius: 50px; cursor: pointer; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1); transition: width 0.3s ease-out; overflow: hidden; padding:0px; } .button.correo:hover { width: 140px; } .button.telefono:hover { width: 150px; } .wrapper .button .icon { display: flex; justify-content: center; align-items: center; height: 60px; width: 60px; color: #000; z-index: 2; } .wrapper .button .icon i { font-size: 17px; } .wrapper .button span { position: absolute; left: 70px; white-space: nowrap; font-size: 16px; font-weight: 500; color: #000; opacity: 0; transition: opacity 0.3s ease-out; } .button:hover span { opacity: 1; font-size: 15px; } a { text-decoration: none; color: #000; }