2

quería saber como puedo mostrar una flecha al hacer hover encima de un botón. Pongo un ejemplo: https://www.nutrilorenzo.es (el botón que dice "Quien soy"), quiero mostrar la flecha con esa animación.

A continuación pongo lo que he intentado.

Como véis, me queda un "hueco" en el botón, supongo que es lugar que corresponde a i class="fas fa-chevron-right", quería saber también como puedo eliminar ese espacio tal y como se muestra en la web que he puesto de ejemplo.

ACTUALIZACIÓN: Ya lo he conseguido, dejo el código editado por si a alguien le sirve. He cambiado el position a absolute y he agregado un padding: right al hacer hover. La animación queda bastante bien.

.button {
  position: relative;
  display: block;
  width: 120px;
  margin: 20px auto 0px;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  color: white;
  border-radius: 2px;
  background-color: #e67321;
  transition: all 0.5s;
}

.fa-chevron-right {
  visibility: hidden;
  position: absolute;
  right: 30px;
  top: 11px;
  transition: all 0.5s;
  opacity: 0;
}

.button:hover {
  background-color: #ca651c;
  padding-right: 8px;
}

.button:hover .fa-chevron-right {
  visibility: visible;
  position: absolute;
  right: 25px;
  opacity: 1;
}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

<body>
<a class="button" href="">BOTON<i class="fas fa-chevron-right"></i></a>
</body>

5
  • Intenta comentar tu codigo y lo que ya has intentado Commented el 9 jul. 2021 a las 20:41
  • Hola, ya está actualizado, espero que sirva.
    – Tutako
    Commented el 9 jul. 2021 a las 21:44
  • 1
    No veo ningún error en lo que muestras, hace exactamente lo que pides. El botón muestra una flecha al poner el mouse sobre él.
    – Rodrigo
    Commented el 9 jul. 2021 a las 22:17
  • Si te fijas, hay un espacio que ocupa la flecha al estar escondida, entonces, las letras del botón cuando no se hace hover no aparecen centradas, mi intención es encontrar una manera de eliminar ese espacio cuando no se haga hover, es decir, cuando el ratón no este encima del botón y después, al hacer hover, que ese espacio se vuelva a añadir mostrando la flecha.
    – Tutako
    Commented el 10 jul. 2021 a las 13:09
  • 1
    Cuando el botón esta escondido, por default, que la flecha esté con position: absolute, así no ocupará espacio en el contenedor Commented el 10 jul. 2021 a las 15:01

1 respuesta 1

2

Debes colocar el ícono en posición absoluta cuando no se muestre, y cuando esté mostrándose, lo colocas en posición relativa. El código quedaría así:

body {
          font-family: "Raleway", sans-serif;
        }


        .button {
          display: block;
          width: 100px;
          margin: 20px auto 0px;
          padding: 10px 0;
          text-align: center;
          text-decoration: none;
          font-weight: 500;
          color: white;
          border-radius: 2px;
          background-color: #e67321;
          transition: all 0.5s;
        }

        .fa-chevron-right {
          position: absolute;
          right: 10px;
          visibility: hidden;
          transition: all 0.5s;
          opacity: 0;
        }

        .button:hover {
          background-color: #ca651c;
        }

        .button:hover .fa-chevron-right {
          position: relative;
          visibility: visible;
          right: -5px;
          opacity: 1;
        }
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

<body>
<a class="button" href="">BOTON<i class="fas fa-chevron-right"></i></a>
</body>

4
  • 1
    Lo he intentado como dices pero la animación queda poco fluida, he cambiado la posición a absoluta y he agregado un padding: right al hacer hover y para mi gusto queda mejor. De todas maneras, gracias por la respuesta.
    – Tutako
    Commented el 11 jul. 2021 a las 18:07
  • Es un gusto intentar ayudar. Commented el 12 jul. 2021 a las 20:26
  • Pero si te lo ha resuelto la duda @Tutako aunque la animación no sea exacta como tu quieres, te ha dado la solución, deberías darlle como mínimo por válida la respuesta...
    – AQMR
    Commented el 13 jul. 2021 a las 7:21
  • Se me olvidó dársela como válida. Acabo de entrar al foro y no me manejo mucho. Disculpen.
    – Tutako
    Commented el 14 jul. 2021 a las 19:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.