3

below is my html and css it works perfectly fine

current behavior is when the button is pressed background color is green as expected, after it is released background color is yellow. but here i want the background color to be blue (normal state).

i cannot remove :focus because on keyboard tab that should work as expected.

what more selectors i have to use to change the background color of the button to blue after released the mouse..

NOTE:- i don't want Jquery or javascript solution i am expecting only css changes.

button { background-color:blue}
button:focus{background-color:yellow}
button:active{background-color:green}
<button>hello</button>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Shiva Sai
  • 463
  • 4
  • 12
  • just remove the focus maybe!! – adel Jul 24 '19 at 08:38
  • 1
    erm then instead of yellow, set your focus to blue? – Gosi Jul 24 '19 at 08:39
  • 1
    Just to understand, do you want to keep the button highlight when it is selected by tab key, and to remove it after it has been focused using a mouse click ? If so, [here's](https://stackoverflow.com/a/45191208/6813732) an excellent answer to this problem by Danield. – sodimel Jul 24 '19 at 08:44
  • 1
    the button stays focused as long as you don't click anywhere. that's default browser behaviour and that's what the user expects. why would you want to change this? – cloned Jul 24 '19 at 08:47

1 Answers1

1

One idea is to consider an extra wrapper that will get the click instead of the button. The trick is to create a transparent layer above using pseudo element and you will still be able to have the focus using the keyboard.

If you have any click handler attached to the button you need to move it the span instead

button { background-color:blue}
button:focus{background-color:yellow}
span:active button{background-color:green;border-style: inset;}

span {
  display:inline-block;
  position:relative;
}
span:before {
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
}
<span><button>hello</button></span>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415