Resaltar fondo de boton

[McBlink]

Buenas tardes,
tengo una duda y nose como resolverla..

Tengo un boton, cuyo color de fondo no lo conozco, es aleatorio. Necesito resaltar este boton cuando el mouse se posiciona sobre él.

Lo que hice fue aplicarle una opacidad del siguiente modo:

Código CSS:

.boton:hover { background-color: rgba(0,0,0,0.3);}
 

Pero el pero el problema es que si el fondo es claro, ese regla CSS anda bien. Pero si el fondo es oscuro, deberia aplicarle algo asi:

Código CSS:

.boton:hover { background-color: rgba(255,255,255,0.3);}
 

De modo que lo aclarezca. Alguien conoce algun efecto con imagenes o regla css que me sirva para resaltar el boton??

Muchas Gracias!

[pitufoweb]

creo que tendrías que detectar el color con javascript para que así puedas aplicar un color diferente.



Saludos

[McBlink]

gracias por responder pitufoweb, y como se si es el color es oscuro o claro mediante JS? Osea, para poder aclararlo o oscurecerlo..

Saludos

[kseso?]

Si utiliza el canal alpha con un valor tan bajo (.3) obtendrá todo menos resalte de ese elemento.
Tampoco es muy explícito en cuanto a los posibles colores de fondo. Algo más de info al respecto ayudaría.

Una aproximación al problema sería trabajar con 4 propiedades que css tiene:

• fondo: ya sea liso o gradiente (linear, radial, dameros...)
• Bordes.
• Sombra (valores múltiples).
• Outline

Con una elección y variedad de valores/efectos en esas cuatro propiedades seguro que al menos 2 resaltará respecto al fondo.

[McBlink]

Gracias kseso? por tu respuesta. Con respecto a los colores, puede ser cualquiera, ya que son seleccionados mediante una paleta de colores javascript. Con sombras bordes y color de fondo estoy logrando que se vea resaltado.

Por ejemplo, con un borde claro y una sombra oscura. Alguno de los dos resaltaría..

Gracias!

[kseso?]

Realmente no necesitaría utilizar bordes.
Tranquilamente puede ser suplido por box-shadow.
Y un paso más, también puede prescindir del background y que sean sombras (inset)
Vea el enlace sobre las sombras que le ponía antes. Recuerde que tiene 6 variables en cada valor de la sombra y que admiten infinitos valores, separados por comas.

Campo y variedad tiene con esa propiedad.

[McBlink]

Muchas Gracias kseso? Muy muy interesante tu articulo de sombras.. Saludos!