Home / Articles / Programming languages / Markup languages / HTML & CSS / Animated 3D button using only CSS3

Animated 3D button using only CSS3

Animated 3D button using only CSS3
 
Animated 3D button using only CSS3
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (1 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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:

<a class="button" href="#">Click me!</a>
<button type="submit" class="button">Click me!</button>

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;
}

Live demo


 

Read also

Animation in CSS3

Animation in CSS3

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation