0

Quiero que mi link se parezca a un botón, el link me lleva a otro lado de la página. El código del link que uso es:

<a herf=#"Caracteristicas">características</a>
<a name="Caracteristicas">Caracteristicas</a>

Y puedo poner esos links aparezcan cuando presione un botón?

2
  • ¿Nos compartes qué has intentado por favor?
    – user128299
    Commented el 25 sept. 2020 a las 17:43
  • Aquí ya tienes posibles respuestas. Para qué escribir otra pregunta idéntica?
    – Alfabravo
    Commented el 25 sept. 2020 a las 18:34

2 respuestas 2

0

Necesitas usar CSS, agrega la clase button a tus links y puedes utilizar un CSS como el siguiente.

a.button {
  background-color: #4CAFF0; /* Tu color */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
<a href="https://google.com" class="button">Ir a Google</a>

Para hacer que aparezcan más botones al dar click a uno, necesitas utilizar Javascript.

2
  • Por qué inline block?
    – user128299
    Commented el 25 sept. 2020 a las 16:56
  • 1
    para evitar que la etiqueta <a> ocupe un width: 100% y solo utilice el ancho del texto escrito, aunque no es necesario, pero para evitar cualquier cosa Commented el 25 sept. 2020 a las 17:10
0

Lo mas sencillo es agregarle una clase a un etiqueta <a> de la siguiente manera:

<a href="#" class="btn">características</a>

Y con eso ya puedes mandar a llamar esa clase desde un css extra, con las siguientes propiedades:

.btn {
  /*Para evitar bordes no deseados en el boton*/
  outline: none;
  border: none;
  display: inline-block;
  /*Le damos un padding para que tenga un pequeño margen al interior del boton*/
  padding: 10px 20px;
  /*El color del texto sera blanco, puedes utilizar codigo rgba() o hexadecimal*/
  color: white;
  /*Aquí eliminamos los estilos de la etiqueta <a>*/
  text-decoration: none;
  /*Le damos un pequeño borde al boton para que tenga un mejor estilo*/
  border-radius: 8px;
  /*Y se aplica un cursor: pointer, para que cambie el cursor*/
  cursor: pointer;
}
<a href="#" class="btn">características</a>

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.