Learn
Learn Links and Buttons
Buttons: Skeuomorphic styling

Skeuomorphic button design aims to imitate the appearance and interactivity of a real-life button, often including a ‘raised’ appearance while the button is unpressed and a ‘pressed’ appearance when clicked.

Skeuomorphic button design can be implemented using image files, CSS rules, or a combination of both. CSS styles should be preferred over image files if possible, since they are faster to load, have smaller file sizes, and allow for a more consistent scaling and appearance across different screen sizes and resolutions. Modern CSS3 has support for many 2-D and 3-D effects and animations and can create many skeuomorphic button designs on its own.

If using CSS rules, the use of hover and/or active states is important in order to model interaction with a real button. For example, to implement a bare minimum 3-D button design, the following CSS ruleset could be used:

.button { padding: 5px; border: 1px solid black; border-radius: 5px; text-decoration: none; box-shadow: 0px 5px; } .button:hover { cursor: pointer; } .button:active { margin-top: 5px; color: black; box-shadow: 0px 0px; }

A button element can then be created with the following HTML:

<div class="button">Click me</div>

The default state of the .button class has some basic ‘buttony’ appearance with a rounded border (border and border-radius properties) and a slightly raised appearance with the use of the box-shadow. The :hover cursor is added for visual feedback. When the button is clicked (:active), the box-shadow is removed, and the margin-top moves the button down by 5px, make it appear to be pressed.

The above example is only one very basic implementation of a 3-D button; there are many additional (and more attractive) ways to create skeuomorphic buttons.

Instructions

1.

Let’s update the buttons on the page to have a raised appearance.

Start by creating a rule that will apply to all elements with the answer class. Set a 1-pixel, solid border with the color #466995.

2.

Add a small border-radius to all corners of 10px in order to round the edges.

3.

Add a box-shadow to give the button a raised appearance. The box-shadow should have an offset-x of 0px and an offset-y of 4px.

4.

Now, let’s alter the :active state to make the button appear to depress downwards when clicked.

  • Set the margin-top to 24px and the margin-bottom to 16px. This will make the button appear to move downward.
  • Set the box-shadow to 0px 0px. This will make the box-shadow disappear.

Next, change the color styling so that the button offers some additional visual feedback:

  • Set the background-color to #C0D6DF
  • Set the color to #ffffff
Folder Icon

Sign up to start coding

Already have an account?