Multi tool use

Apply opacity to only background color of button not to text color

I need to apply opacity to only background color of a button on hover. The text color of button should not under the influence of opacity..

When I am applying opacity.. the button text color also becoming darkish.. it should be as it is.. I tried to use linear-gradient with black color to get opacity effect but it is showing completely black color..

plunker link -> http://plnkr.co/edit/HLoQf4fznVFx8OK10Wdl?p=preview

plunker link ->

3 Answers
3

You can only override the background color with rgba which allows you to pass the opacity as the fourth argument.

rgba

button{
background: rgba(255,0,0,1);
}
button:hover{
background: rgba(255,0,0,0.5);
}


The opacity property adds transparency to the background of an element, and to all of its child elements as well.To not apply opacity to child elements use RGBA color values instead.

#btn:hover {
background: rgba(219, 15, 15, 0.973);
}


You shouldn't give opacity on hover, you have to handle it through background rbga. The first three numbers are the red, green and blue values for your background color, and the fourth is the 'alpha' channel value, which works the same way as the opacity value. See this page for more info: http://css-tricks.com/rgba-browser-support/. Here is the working pen

#btn {
background: rgba(219, 15, 15, 1);
color: #fff;
}

#btn:hover {
background: rgba(219, 15, 15,.5);
}

<h1>Hello Plunker!</h1>
<button id="btn" type=button>Click Me</button>

Note: Try changing the color of the button to see the opacity effect.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.