Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Efecto raro en botón en Nav

preguntó
Web
1228 Vistas
1 Respuestas
solucionada

Tengo un problema al dar click a un botón, me aparece un cuadrado de uno de los colores principales de materialize.css (parecido a bootstrap)
mando un enlace a mi codepen

https://codepen.io/dsf91/pen/ONavJg

El botón está en la línea 15.
Saludos.

por kratos91 (1.530 puntos) en Web

1 Respuesta

0voto

Peter Puntos150480

Va a ser difícil adivinar a que botón te refieres. En la linea 15 esta el título de arriba.

<a href="index.html" class="brand-logo titulo">Biblioteca Kursaal</a>

Y supongo que a eso no te refieres.

Pueden ser los botones que dicen "Button" todos y al darles click se ponen en verde más claro. Supongo que a esos te refieres.

Si son esos, es normal, así viene materialize, que utiliza Waves v0.6.0 y empiezan en la linea 5401 de ese CSS.

Ahí tienes todas las clases que puedes modificar como quieres que se vean.

Si son otros botones, mejor ponles nombre a cada uno de ellos, di cual es y di exactamente como cambia a que color exacto, en que posición exacta, etc...

por Peter (150.480 puntos)
seleccionada por

0voto

kratos91 comentado

Perdón escribí y luego hice un cambio:

<button type="submit" class="botonNav"> <img src="http://localhost/biblioteca/images/booksearch.png" alt="buscar" height="50px"></button>

línea 26

preferiría un cambio que sólo afecte a este botón en concreto, ¿sería posible?

he comentado todo hasta quitar los demás botones. Los otros botones van bien. Lo que no quiero es que se vea ese rectángulo al pulsar. Saludos

https://drive.google.com/file/d/12g9NVHaS2dQWRz8Af5YduL6OHg19H03-/view?usp=sharing

por kratos91 (1.530 puntos)
editado por

0voto

Peter comentado

Estas utilizando localhost para las imágenes, nadie va a poder ver y arreglar tu ejemplo así.

No se si sigas modificando y cada vez que uno entra a ayudarte, las cosas están diferente.

De cualquier forma, todo viene de los mismos estilos y scripts que estas cargando y al saber a cual te refieres, sólo tienes que buscar "botonNav" en ellos para ver que se está aplicando y modificarlo a tu gusto.

En tu mismo CSS tienes:

.botonNav 
  background: none
  border: none

.botonNav:active 
  background: none

Si lo que quieres es que los colores sean diferentes, sólo cambia el background en ambos.

Si el problema es otro, utiliza una imagen que cargue en tu ejemplo y que no sea localhost para poder verlo y te ayudo.

por Peter (150.480 puntos)

0voto

kratos91 comentado

¿Podemos hablar por discord?
Kratos91#4178

por kratos91 (1.530 puntos)

0voto

Peter comentado

No. Aquí puedes plantear lo que quieras y te ayudo.

por Peter (150.480 puntos)

0voto

kratos91 comentado

https://codepen.io/dsf91/pen/ONavJg
ya está sin localhost, cuando se le da click al libro de la derecha (con la lupa) sale un rectángulo de color azul verdoso que no quiero que salga, ¿cómo lo evito?

por kratos91 (1.530 puntos)

0voto

Peter comentado

Ahora si. Con este CSS lo arreglas.

button:focus {
    background: none;
}
por Peter (150.480 puntos)

0voto

kratos91 comentado

Gracias pero sigue saliendo

por kratos91 (1.530 puntos)

0voto

Peter comentado

Depende de donde estés poniendo el CSS, el anterior es para todos los botones, pero puedes hacerlo directo en la clase de ese botón:

.botonNav:focus {
    background: none;
}
por Peter (150.480 puntos)

0voto

kratos91 comentado

No es eso, sale bien un segundo y va mal al momento. Tiene que haber otra solución

por kratos91 (1.530 puntos)

0voto

Peter comentado

No lo estás agregando bien para sobre escribir materialize. Así es como se soluciona, lo hago en tu mismo pen y funciona como quieres.

Como no se si estas probando en otro lado, utiliza important:

.botonNav:focus {
    background: none!important;
}
por Peter (150.480 puntos)

0voto

kratos91 comentado

Probado sin éxito

por kratos91 (1.530 puntos)

0voto

Peter comentado

¿En donde estas probando? Porque tú pen ya lo tiene y ya no sale lo verde.

por Peter (150.480 puntos)

1voto

kratos91 comentado

Perdona, todo va bien, gracias.

por kratos91 (1.530 puntos)

0voto

Peter comentado

Bien, estabas probando en otro lado, porque desde el primer CSS funciona correctamente. Que bueno que ya te quedó. Por favor selecciona la respuesta como correcta para darla por solucionada.

por Peter (150.480 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta