Menu
hopefully you can help with a simple question about CSS. I'm trying to make a button (doesn't need to be 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 at a different opacity than the button. Is this possible?
My attempt at a fiddle to solve this here - 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 hints.
634
The percentage of opacity is calculated as Opacity% = Opacity * 100 To set the opacity only to the background and not the text inside it. It can be set by using the RGBA color values instead of the opacity property because using the opacity property can make the text inside it fully transparent element.
You can get this effect by adding the button's background in front of the text, using a pseudo element, and then using mix-blend-mode on the button ( screen ), and the pseudo element ( color-burn ) to create the cutout effect.
HTML Code: In this section, we will create a basic structure of button using the button Tag. CSS Code: In this section, we will design the button using CSS property. We will use the background-color: transparent; property to set the button with transparent look.
You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it. And use no background on your container. Now container's children have no opaque parent and the problem vanishes.
opacity is inherited by children and can't be reversed, so use rgba on the parent as well. E.g.
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
