es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Estilo de enlace no mostrándose en Safari.

18 Jul, 2023 Programación

Tengo un “botón” que básicamente es un enlace. Está estilizado de la forma que quiero y se muestra así en Chrome: Captura de pantalla.

Pero en Safari solo muestra el texto y nada más.

El código que he utilizado:

.button-see-more {
  border: none;
  border-radius: 5px;
  background-color: #e4e4e4;
  font-size: 0.8em;
  padding: 0px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(1, 0, 1, 0.13) 0s;
}

.button-see-more:hover {
  transition: 0.2s;
  background-color: #000000;
  color: #FFFFFF;
}

<a href="/project-inadequat.html" class="button-see-more">
  <p>Ver más</p>
</a>

Estoy bastante seguro de que estoy haciendo algo mal y agradecería saber qué.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Es posible que Safari no reconozca la etiqueta HTML p dentro de la etiqueta a. Intenta quitar la etiqueta p y colocar el texto directamente dentro de la etiqueta a de esta manera:

    <a href="/project-inadequat.html" class="button-see-more">Ver más</a>

    Si eso no funciona, intenta agregar la propiedad display: block; a la etiqueta a de esta manera:

    .button-see-more {
  border: none;
  border-radius: 5px;
  background-color: #e4e4e4;
  font-size: 0.8em;
  padding: 0px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(1, 0, 1, 0.13) 0s;
}

.button-see-more:hover {
  transition: 0.2s;
  background-color: #000000;
  color: #FFFFFF;
}

a.button-see-more {
  display: block;
}

    ¡Espero que eso ayude!

Comments are closed.