Problema al hacer clic en botón con forma de enlace en CSS

zarakatajamember · 29 Ene 2021

Buenas, estoy creando un enlace con forma de boton. Pero no se porque para que haga clic y enlace a la web solo funciona si se hace clic en el texto del boton. Eso porque ocurre.

Aqui el css
.btn-llamar{
background-color: #0d0f5f;
padding: 0.5rem 3rem;
margin: 10px;
border-radius: 5px;
text-align: center;
width: auto;
}
.btn-llamar a{
text-decoration: none;
font-size: 1rem;
text-transform: uppercase;
font-weight: 700;
font-family: Rubik;
color: white;
}
.btn-llamar:hover{
background-color: #1e6e6e;
}

Henry00jj95 · 29 Ene 2021

y el html del botón como lo tienes?

zarakatajamember · 29 Ene 2021

Henry00jj95 dijo:
y el html del botón como lo tienes?

diste en el clavo. La clase estaba puesta en el div, no el enlace

zarakatajamember · 29 Ene 2021

Ahora tengo otro problema.
el html

<div class="btn">
<a href="tel:+543498449699" class="btn-llamar"><i class="fas fa-phone-square-alt fa-2x"></i> llamar</a>
</div>

y el css modificado

.btn{
display: flex;
justify-content: center;
}
.btn-llamar{
background-color: #0d0f5f;
padding: 0.5rem 3rem;
margin: 10px;
border-radius: 5px;
text-align: center;
width: 90%;
text-decoration: none;
font-size: 1rem;
text-transform: uppercase;
font-weight: 700;
font-family: Rubik;
color: white;
}
.btn-llamar:hover{
background-color: #1e6e6e;
}
@Media (min-width: 768px) {

.btn-llamar a{
width: 7rem;
margin: auto;
}

Lo que quiero es que en modo celular, se vea el botón ocupando el 90% del ancho de la pantalla, pero que cuando pase a escritorio tenga 7rem

sevilla666 · 30 Ene 2021

@zarakatajamember sustituyendo ".btn-llamar a" por ".btn-llamar" tendria que funcionar:


@media (min-width:768px){
.btn-llamar{
       width: 7rem;
       margin: auto;
   }
}

zarakatajamember · 31 Ene 2021

Ahora lo pruebo y te digo. Evidentemente tengo q mejorar mis prácticas css porque veo q hay mucho código q por ahí se repite o termina jugando en contra. Por ejemplo al sumarse los margin. Mil gracias

Rafaelini · 31 Ene 2021

No sé si resuelva tu problema, pero no noto que a ningún elemento le hayas puesto display block o inline-block.

El elemento <a> es un elemento inline por defecto, esto es, aunque le pongas padding, height o width no te lo va a reconocer, ya que el tamaño lo va a definir simplemente el texto.

Al poner ya sea block o inline-block entonces ahora sí te reconoce los paddings altos y anchos.

Así puedes poner los estilos que al parecer ahora estás usando en el div contenedor en el mismo elemento a, y este elemento a se vuelve auto suficiente, o sea que lo puedes poner en cualquier lado y mantendrá su aspecto de botón.

<a class="boton">

Le puedes poner todo, bordes, esquinas redondeadas, sombras, y estados al botón con .boton:hover.

zarakatajamember · 1 Feb 2021

Rafaelini dijo:
No sé si resuelva tu problema, pero no noto que a ningún elemento le hayas puesto display block o inline-block.

El elemento <a> es un elemento inline por defecto, esto es, aunque le pongas padding, height o width no te lo va a reconocer, ya que el tamaño lo va a definir simplemente el texto.

Al poner ya sea block o inline-block entonces ahora sí te reconoce los paddings altos y anchos.

Así puedes poner los estilos que al parecer ahora estás usando en el div contenedor en el mismo elemento a, y este elemento a se vuelve auto suficiente, o sea que lo puedes poner en cualquier lado y mantendrá su aspecto de botón.

<a class="boton">

Le puedes poner todo, bordes, esquinas redondeadas, sombras, y estados al botón con .boton:hover.

excelente, no lo sabia. De hecho no se mucho de css, pero bueno lo mejor es tocando el codigo. Me está dando bastante trabajo acomodar lo que quiero porque lo arreglo por un lado y se desarregla por el otro.