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

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.

1 Respuesta

0voto

Peter Puntos150460

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...

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

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.

0voto

kratos91 comentado

¿Podemos hablar por discord?
Kratos91#4178

0voto

Peter comentado

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

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?

0voto

Peter comentado

Ahora si. Con este CSS lo arreglas.

button:focus {
    background: none;
}

0voto

kratos91 comentado

Gracias pero sigue saliendo

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;
}

0voto

kratos91 comentado

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

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;
}

0voto

kratos91 comentado

Probado sin éxito

0voto

Peter comentado

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

1voto

kratos91 comentado

Perdona, todo va bien, gracias.

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 favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

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

Conecta