Monkey Raptor: 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

.bart {
  background:#ddd;
  box-shadow:-2px -2px 6px #bbb inset;
  padding:10px 20px;
  border:0;
  border-radius:5px;
  margin:5px;
}

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 :

<div style="text-align:center">
  <button type="button" class="bart"><span>I'm a button</span></button>
  <button type="button" class="bart"><span>I'm a button</span></button>
  <button type="button" class="bart"><span>I'm a button</span></button>
</div>

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 :

/*let's style the span inside the button*/
.bart > span {
  position:relative;
}
.bart:hover {
  /*change the button's background to white color*/
  background:white;
}
.bart:focus {
  /*eliminate the outline*/
  outline:0;
}
/*these will create the "clicked" effect*/
.bart:active {
  box-shadow:2px 2px 6px #bbb inset;
}
.bart:active > span {
  top:1px;
  left:1px;
}

Result

All styling combined for this 1^st example :

.bart {
  background:#ddd;
  box-shadow:-2px -2px 6px #888 inset;
  border:0;
  padding:10px 20px;
  border-radius:5px;
  margin:5px;
}
.bart > span {
  position:relative;
}
.bart:hover {
  background:white;
}
.bart:focus {
  outline:0;
}
.bart:active {
  box-shadow:2px 2px 6px #bbb inset;
}
.bart:active > span {
  top:1px;
  left:1px;
}

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.

.bart:focus {
  background: lightyellow;
}

The complete CSS for this 2^nd example looks like :

.bart {
  background:white;
  box-shadow:-2px -2px 6px #888 inset;
  border:0;
  padding:10px 20px;
  border-radius:5px;
  margin:5px;
}
.bart > span {
  position:relative;
}
.bart:hover {
  background: white;
}
.bart:focus {
  outline: 0;
  /*the additional "highlighting" property for :focus pseudo-class*/
  background: lightyellow;
}
/*pay attention at this, combining pseudo-classes*/
.bart:focus:hover {
  background: white;
}
.bart:active {
  background: white;
  box-shadow: 2px 2px 6px #888 inset;
}
.bart:active > span {
  top: 1px;
  left: 1px;
}

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

Monkey Raptor

Wednesday, May 21, 2014

CSS: Button Element Quick Styling

No comments:

Post a Comment