Wednesday, May 21, 2014

CSS: Button Element Quick Styling

Long story short, I'm gonna make couple examples for button element.
First, create the CSS for the example button
Let's name the class as bart

Then, declare the button HTML element
I need to put the button on the center, so, I'll wrap it (them) with a div with inline styling.
Such as :

Basic Result


Let's continue
The button still has the default styling (which you can or can't see). To further customize it, then we will need to add :hover, :focus, :active pseudo-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 span inside the button element, like so :

Result


All styling combined for this 1st example :


Another example
Because I eliminated the outline of the button, user which is selecting using keyboard will get confused. Let's make the selected button via keyboard (or after the click event via mouse) has "footprint". The "footprint" has lightyellow background color.

The complete CSS for this 2nd example looks like :

Result


That's it
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.
  • :active should (must) come after :hover. In general, the pseudo-class must be declared below the original selector.
  • The :focus can be placed anywhere after the non-pseudo-class-ed selector.


Reference :
  • W3 CSS selector specifications at :
    www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

No comments:

Post a Comment

Tell me what you think...