CODEWITHSUNDEEP
csscolors
Tim
Tim

Reputation: 3806

Draw a Border but have it not have it inherit object opacity

Please see the following jsBin:

http://jsbin.com/uyonux/1

It is working as desired on the hover state. However the focus state does not work as desired on focus i would like the blue color to not inherit the opacity of .4 i want it the solid #13A3F7 color. Is there any way to append the border without having it use the element opacity?

I tried pseudo elements but they also inherit opacity.

The other solution could be to take 60% plus of #13A3F7 but i don't think that works due to saturation.

I know i could change the image but the point is we are trying to use one black icon and then adjust it with opacity on the various states.

Thanks

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;
}

Also I'll need to support IE8 for now :(

Upvotes: 0

Views: 76

Answers (2)

Angelin
Angelin

Reputation: 648

Use outline: instead of border, like this:

button:focus, button:active {
  outline: 1px solid #13A3F7 !important;
}

Edit: You could achieve this by using a link instead of button. Check out this Plunker: http://plnkr.co/edit/NZ3lOyFBSxOFwSExyBpA?p=preview

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You could use RGBa colors.

Like this: 

border: 10px solid #ff0000;
border-color: rgba( 255,0,0,0.5);

Upvotes: 2

Related Questions