Check out this jsBin for reference:
The hover state is working fine, but the focus state is not. I want the blue color to remain solid #13A3F7 without inheriting the opacity of .4. Is there a way to achieve this without the element's opacity affecting it?
I tried using pseudo-elements, but they also inherit opacity.
Another solution could be to adjust the color by taking 60% of #13A3F7, but saturation might be an issue.
I prefer using one black icon and adjusting its states with opacity rather than changing the image altogether.
Thank you!
button {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAALElEQVR42mNgwA/+QzHZYGAM2E8ADwED6B+I+ynEpPsLzfJBYgBFYTDEMxMA8SA+M9tIcT0AAAAASUVORK5CYII=") ;
border: none;
height: 23px;
width: 26px;
background-repeat: no-repeat;
opacity: 0.4;
filter: alpha(opacity=40);
background-position: center center;
}
button:focus {
border: 1px solid #13A3F7;
}
button:hover {
background-color: #CFCFCF;
box-shadow: 0 1px #696969;
opacity: 0.65;
filter: alpha(opacity=65);
cursor:pointer;
}
Unfortunately, I need to ensure compatibility with IE8 for now :(