Geek Answers Handbook

CSS button text and various opacity button background

hope you can help with a simple CSS question. I am trying to make a button (not necessarily an html class button) with a transparent background and an outline with text that does not have the same opacity as the button. That is, the text should remain with a different opacity than the button. Is it possible?

My violin attempt to solve this problem here is http://jsfiddle.net/9jXYt/

CSS

#xxx { outline:white solid 0.5px; /*opacity: 0.2; */ background-color: rgba(255,0,0,0.2); padding: 6px 8px; border-radius: 3px; color: black; font-weight: bold; border: none; margin: 0; /*box-shadow: 0px 2px 3px #444;*/ } #xxx:hover { opacity: 0.9; } #fff { font-family: helvetica, arial, sans-serif; font-size: 19pt; opacity: 1 !important; color: rgba(0,0,0,0.5) !important; }

HTML: <button id="xxx"><div id="fff">This is a test</div></button>

Thanks in advance for any tips.

+6
source share
4 answers

opacity inherited by children and cannot be undone, so use rgba for the parent rgba . For instance.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #xxx { outline:white solid 0.5px; padding: 6px 8px; border-radius: 3px; color:rgba(0,0,0,0.4); font-weight: bold; border: none; margin: 0; background: rgba(0,0,0,0.2); font-family: helvetica, arial, sans-serif; font-size: 19pt; } #xxx:hover { background: rgba(0,0,0,0.4); color:rgba(0,0,0,0.8); } </style> </head> <body> <button id="xxx">This is a test</button> </body> </html>
+9
source

I think the secret of what you are trying to do is use transparent colors, not transparency.

 #xxx { outline:white solid 0.5px; padding: 6px 8px; border-radius: 3px; background-color: rgba(0,0,0, .25); color: black; font-weight: bold; border: none; margin: 0; } #xxx:hover { background-color: rgba(0,0,0,.30); } #fff { font-family: helvetica, arial, sans-serif; font-size: 19pt; color: rgba(0,0,0,.25); } #fff:hover { color: rgba(0,0,0,.6); }

I adapted your fiddle: http://jsfiddle.net/harveyramer/8pymY/

+3
source 
 #xxx:hover { background-color: rgba(255,0,0,0.9); }

By setting your opacity, you act on everything in it.

0
source

As ralph.m said, opacity is inherited by children and can't be reversed, so use rgba on the parent as well. If you need an example , here is the edited jsfiddle.

http://jsfiddle.net/9jXYt/3/

Good luck

0
source

More articles:


All Articles