There are four states of buttons in CSS
1. General Status
2. Hover Mouse Hover State
3. Active Click Status
4. Focus has a focused status
. btn:focus{outline:0; can remove the blue border after the button or a-tag is clicked
In the example below. BTN1 with the focus button will press, do not play
. BTN2 press with the active button to bounce
<class= "btn btn1">Save Settings</button ><class= "btn btn2">Submit</ Button>
. BTN{appearance:None;background:#026aa7;Color:#fff;font-size:20px;padding:0.65em 1em;Border-radius:4px;Box-shadow:inset 0-4px 0 0 rgba (0,0,0,0.2);Margin-right:1em;cursor:Pointer;Border:0;}. Btn1:hover{Box-shadow:inset 0-4px 0 0 rgba (0,0,0,0.6), 0 0 8px 0 rgba (0,0,0,0.5);}. Btn1:focus{position:relative;Top:4px;Box-shadow:inset 0 3px 5px 0 rgba (0,0,0, 0.2);Outline:0;}. Btn2:hover{Box-shadow:inset 0-4px 0 0 rgba (0,0,0,0.6), 0 0 8px 0 rgba (0,0,0,0.5);}. Btn2:active{position:relative;Top:4px;Box-shadow:inset 0 3px 5px 0 rgba (0,0,0,0.2);Outline:0;}. Btn2:focus{Outline:0;}
Four states of buttons in CSS