Flat design trends – How to create buttons that pop out in pure CSS

Flat design everywhere at the minute.  Add a bit of depth to the page and make your buttons stand out, whilst adhereing to the ‘flat’ design style.  See the example below:

…and here’s the code you need:

.bigbutton {
  border: 0;
  cursor:pointer;
  background: #e84c3d;
  color: white;
  padding: 7px 16px;
  font-size: 13px;
  text-decoration: none;
  display: inline-block;
  position: relative;
	box-shadow: 1px 0px #c1392d, 0px 1px #c1392d,
              2px 1px #c1392d, 1px 2px #c1392d,
              3px 2px #c1392d, 2px 3px #c1392d,
              4px 3px #c1392d, 3px 4px #c1392d,
              5px 4px #c1392d, 4px 5px #c1392d,
              6px 5px #c1392d, 5px 6px #c1392d;
}
.bigbutton:hover, .bigbutton:focus,
.bigbutton.hover, a.bigbutton.focus {
    transform: translate(2px, 2px);
	-webkit-transform: translate(2px,2px);
	-ms-transform: translate(2px,2px);
    box-shadow: 1px 0px #c1392d, 0px 1px #c1392d,
              2px 1px #c1392d, 1px 2px #c1392d,
              3px 2px #c1392d, 2px 3px #c1392d,
              4px 3px #c1392d, 3px 4px #c1392d;
	color: white;
	text-decoration: none;
  }
.bigbutton:active,
.bigbutton.active {
   	transform: translate(4px, 4px);
	-webkit-transform: translate(4px,4px);
	-ms-transform: translate(4px,4px);
    box-shadow: 1px 0px #c1392d, 0px 1px #c1392d,
              2px 1px #c1392d, 1px 2px #c1392d;
	color: white;
	text-decoration: none;
  }

Code explained

The button simply repeats a box-shadow (down and across) many times to give a raised look. This shadow is reduced at the hover state, and reduced further on the active (clicked) state.  This makes it seem as if the button is being ‘pressed’.

The transform property is used to adjust the position of the text as the shadow is reduced, so that the face of the button (and text) appear to move with the button itself. Clever!

As this technique uses many CSS3 properties, it’s won’t be compatible with older browsers.  For example, the box-shadow is only supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.  It will degrade gracefully however.

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.