La accion del clic solo funciona en el texto del boton.

zarakatajamember

Delta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
28 Nov 2013
Mensajes
653
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

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
29 May 2019
Mensajes
854
y el html del botón como lo tienes?
 

zarakatajamember

Delta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
28 Nov 2013
Mensajes
653
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

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios!
Desde
30 Nov 2016
Mensajes
186
@zarakatajamember sustituyendo ".btn-llamar a" por ".btn-llamar" tendria que funcionar:
@media (min-width:768px){ .btn-llamar{ width: 7rem; margin: auto; } }
 

zarakatajamember

Delta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
28 Nov 2013
Mensajes
653
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

Gamma
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
6 Nov 2014
Mensajes
192
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

Delta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
28 Nov 2013
Mensajes
653
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.
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba