0

Tengo un botón que quiero que haga un href, pero se me está haciendo imposible, ¿alguna idea de qué puede ser?

Este es el código:

CSS y HTML

butn:hover {
  background-color: yellow;
}

.butn {
  cursor: pointer;
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  font-family: Arial;
  color: #f586b3;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #f586b3 2px;
  text-decoration: none;
}

.butn:hover {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  text-decoration: none;
}

span.butn {
  margin-left: 24%;
}
<a href="contacto.html"></a><span class="butn">¡Me interesa!</span>

1
  • 3
    No estas anidando bien las etiquetas, la etiqueta <a> debería envolver al span: <a href="contacto.html"><span class="butn">¡Me interesa!</span></a>
    – user7176
    el 23 may. 2019 a las 10:02

2 respuestas 2

6

No tienes el botón en el enlace.

<a href="contacto.html"></a><span class="butn">¡Me interesa!</span>

Estás cerrando el a antes del span y, por lo tanto, éste no está referenciado a ninguna parte. Es decir, por una parte tienes un enlace que redirige a contacto.html sin texto y, por lo tanto, no se ve en pantalla, y, por otra parte, tienes un span con apariencia de botón.

La forma de hacerlo sería:

<a href="contacto.html"><span class="butn">¡Me interesa!</span></a>

Debes meter el span dentro del a para que éste sirva de botón.

4

La etiqueta a cierra antes del span, por eso nunca se acciona el enlace

<a href="contacto.html"><span class="butn">¡Me interesa!</span></a>

butn:hover { 
  background-color: yellow;
}

.butn {
  cursor:pointer;
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  font-family: Arial;
  color: #f586b3;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #f586b3 2px;
  text-decoration: none;
}

.butn:hover {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  text-decoration: none;
}

span.butn {
  margin-left: 24%;
}
<a href="contacto.html"><span class="butn">¡Me interesa!</span></a>

Tu Respuesta

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

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