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


please see following jsbin:

http://jsbin.com/uyonux/1

it working desired on hover state. focus state not work desired on focus blue color not inherit opacity of .4 want solid #13a3f7 color. there way append border without having use element opacity?

i tried pseudo elements inherit opacity.

the other solution take 60% plus of #13a3f7 don't think works due saturation.

i know change image point trying use 1 black icon , adjust opacity on 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 support ie8 :(

use outline: instead of border, this:

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

edit: achieve using link instead of button. check out plunker: http://plnkr.co/edit/nz3loyfbsxofwsexybpa?p=preview


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -