css - Draw a Border but have it not have it inherit object opacity -
please see following jsbin:
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
Post a Comment