Creating a realistic button with CSS3

The goal is to create a button, like in the image, not with a single picture, but with the help of CSS3


')
I want to consistently talk about the process of creating buttons and effects.

All the salt is in the details.

The point is to use a combination of effects to create a three-dimensional object. Mike Rundle talks about the subtleties in the interfaces , I hope to tell you a little more about it. The idea is as follows:

• The button is on the surface
• The button is slightly raised and its texture is different from the surface
• Text "pressed" into the button

The HTML used for the button is a bit excessive, but the meaning will be clear when we delve into the details.

<a class = "button" ><b class = "o" ><b class = "m" ><b>Post</b></b></b></a>

* This source code was highlighted with Source Code Highlighter .

And now let's deal with the style:

1. A simple gradient, brighter at the top, shows that the light source above and the surface of the button is slightly raised. Use a 1 pixel wide background image.
   a.button bm {
background: transparent url(button.png) repeat-x 0 0;
}
   
2. Light border at the edges - reflections of light. We use the CSS3 rgba property for this. We use alpha blending, since reflected light is much better seen below.
   
3. A hard 1px upper border to show that light from the top edge of the light is reflected more strongly.
   a.button bm {
border-width: 1px;
border-style: solid;
border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
}
   
4. A lighter 1px lower bound to create the effect that the button is right on the surface.
   a.button {
border-width: 1px;
border-style: solid;
border-color: transparent transparent rgba(255, 255, 255, 0.63);
}
   
5. 1px border around the button to show the button shadow on the surface. Use rgba again
   a.button bo {
border: 1px solid rgba(0, 0, 0, 0.56);
}
   
6. And finally, the shadow for the text to create the effect of "depression"
   a.button bm b {
text-shadow: 0 1px 0 #DDD;
color: #262626;
}
   

Different button states

I like it when the buttons have several states. The easiest way to show the hover status is to highlight the button background. For the click state, you need to show that the raised button is pressed into the surface. Therefore, the button illumination should show this. Here are some examples:



I like it when the button is “pressed”, but it does not move anywhere. Change the shape of the button from convex to concave

Consider this in more detail:

1. Vertically reflect the gradient. The dark part of the gradient is darker than the previous state, since the light falling on the lower part of the convex shape is reflected more strongly than the light falling the upper part concave.
   a.button:active bm {
background-position: 0 -160px;
}
   
2. The bright upper border of the button emphasizes that its edges do not move.
   
3. The lower border is lighter, since the main border also does not move
   
4. The lower border is lighter, since the main border also does not move
   
5. The side edges are slightly lighter (but not much), as they move with the surface
   a.button:active bm {
border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}
   

Below is a large part of the css, and here , used sprite.
a.button {
text-decoration: none;
border-color: transparent transparent #ECECEC; /** rgba fallback **/
border-color: transparent transparent rgba(255, 255, 255, 0.63);
cursor: pointer;
outline: none;
}
a.button:hover {
text-decoration: none;
}
a.button,
a.button bo,
a.button bm {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-width: 1px;
border-style: solid;
display: block;
}
a.button bo {
border-color: #5A5A5A; /** rgba fallback **/
border-color: rgba(0, 0, 0, 0.56);
}
a.button bm {
background: transparent url(button.png) repeat-x 0 0;
border-color: #FFF transparent #C7C7C7; /** rgba fallback **/
border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
}
a.button:hover bm {
background-position: 0 -80px;
}
a.button:active bm {
background-position: 0 -160px;
border-color: #B7B7B7 transparent #D4D4D4; /** rgba fallback **/
border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}
a.button bm b {
display: block;
font-weight: bold;
padding: 4px 8px;
text-shadow: 0 1px 0 #DDD;
color: #262626;
/** Make the text unselectable **/
-moz-user-select: none;
-webkit-user-select: none;
}

Demo in the original article