First, create the CSS for the example button
Let's name the
Then, declare the
I need to put the
buttonon the center, so, I'll wrap it (them) with a
divwith inline styling.
Such as :
The button still has the default styling (which you can or can't see). To further customize it, then we will need to add
:activepseudo-classes in the CSS.
:hover► element's state when it's hovered by a mouse cursor.
:focus► element's state when it's got focused (selected), either by mouse or keyboard.
:active► element's state when it's being clicked (activated).
Add those pseudo-classes and style a bit the
buttonelement, like so :
All styling combined for this 1st example :
Because I eliminated the
outlineof the button, user which is selecting using keyboard will get confused. Let's make the selected
buttonvia keyboard (or after the click event via mouse) has "footprint". The "footprint" has
The complete CSS for this 2nd example looks like :
You can add other CSS properties to suit your taste for any of those pseudo-classes (or the combined pseudo-classes).
Anyway, you might want to pay attention at the order of CSS pseudo-classes.
:activeshould (must) come after
:hover. In general, the pseudo-class must be declared below the original selector.
:focuscan be placed anywhere after the non-pseudo-class-ed selector.
- W3 CSS selector specifications at :