Animated 3D button using only CSS3

The present article demonstrates an example of a button which is represented as 3D object with simple animation using only CSS3.

The styles below are applied to elements which have class "button". These styles can be mainly applied for links and buttons in HTML.

Here is HTML code of a link and button:

Click me!

The button has rounded corners which are achieved by border-radius CSS property, if you want to know more about this CSS property read the article: Box with rounded corners using CSS3.

Also the button looks like a 3D object, but in the reality it is an illusion which is achieved by box-shadow CSS property. The way how it works is very similar to the way how the pseudo 3D text works in the following article: CSS3: pseudo 3D text using text-shadow property.

To create the animation of this button, use transition CSS property and active CSS pseudo-class. The transition property creates gradual animation for redefined properties in the selector with active pseudo-class. The selector with active pseudo-class applies its styles when the element is active and the element, in turn, becomes active when a user clicks on it.

In case the user clicks on the button three things happen simultaneously:

  1. The position of the vertical shadow goes up which reduces the illusion of depth.
  2. The shadow around the button becomes smaller, this shows that the button "loses" its depth (less 3D).
  3. The button goes a few pixels down to make an illusion if it was pressed into the surface.

Here are CSS styles for the button:

.button {
  position: relative;
  background-color: #9E9E9E;
  -webkit-border-radius: 10px;
  border: none;
  border-radius: 10px;
  -webkit-box-shadow: 0px 8px 0px #878787, 0px 8px 20px #000000;
  box-shadow: 0px 8px 0px #878787, 0px 8px 20px #000000;
  color: #FFFFFF;
  display: inline-block;
  font-size: 34px;
  padding: 2px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.button:active {
  -webkit-box-shadow: 0px 2px 0px #878787, 0px 2px 8px #000000;
  box-shadow: 0px 2px 0px #878787, 0px 2px 8px #000000;
  top: 7px;
}

Continue reading here: How to create flashing/glowing button using animation in CSS3

Was this article helpful?

+1 0