Foro de elhacker.net

Buenas,

Tengo una situación algo así:

<div class="miclase"> 
  <p>Aqui puedes hacer retos para ganar premios</p> 
  <button>De acuerdo</button> 
</div>

Y a través de CSS le estoy dando estilo a todo el div. El problema es que el botón no me está cogiendo el estilo porque se está aplicando el CSS por defecto para un botón (es decir, me aparece el típico botón gris por defecto). Entonces, quisiera que mi estilo del div afectase también a mi botón.

Os dejo una foto donde se ve perfectamente:

(http://thumbs.subefotos.com/625076ac80943fb5428f771412b40b31o.jpg) (http://subefotos.com/ver/?625076ac80943fb5428f771412b40b31o.png)

¿Alguien sabe cómo solucionarlo?  ;D

Buenas JonaLamper,

muy sencillo. Con solo modificar los atributos background-color y border ya puedes hacer de casi todo a tu botón.

No se si se trata de una trampa pero en tu imagen no veo nada relevante, más bien parece que el botón ha desaparecido :laugh:

De todas formas, aquí tienes un ejemplo:

https://jsfiddle.net/ogbnfy5x/

Como ves, el botón parece texto... Pero, ops, parece que me he equivocado Ikillnukes, aún se sigue viendo el border azul por defecto de algunos navegadores al hacer click, en ese caso, solo es añadirle otro atributo llamado outline.

outline: none;

Esa es la solución.

Un saludo.

Gracias.

Prueba a hacer click en la imagen  :)

Cada navegador tiene sus propios 'estilos' por defecto.

Para anular este comportamiento y tener un site homogéneo en todos los browser, lo mejor es usar Normalize.css (https://necolas.github.io/normalize.css/)

Lo que hace es 'resetear' todos los estilos para que se vean igual en todos los navegadores.

Facil, en tu hoja de estilo donde dice ".miclase{..." ponle ".miclase, .miclase button{..." eso hará que el estilo de .miclase también afecte a button dentro de la clase "miclase" debido a que hereda.

De todas maneras eso es una muy mala práctica, normalmente debe haber un estilo para la division y otra para el boton y ambos con estilos distintos, si quieres que el boton tenga el mismo color de fondo que la division entonces debes darle un background-color transparent al igual que la propiedad border. y hacer esto para estado normal, :hover, :pressed, :focus y :active, recuerda que para cada estado un botón tiene diferentes estilos.

Saludos.