Pro CSS3 Animation

ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS

Of course, it is also possible to more elaborately style a link, as in Listing 4-25.

Listing 4-25. HTML and CSS to Create a Giant Help Button

help

a.bigbutton {
font-family: "Blue Highway"; text-transform: uppercase; color: #fff;
background: radial-gradient(center 50px, circle farthest-corner, #ef6634, #c63a17 43%,#ba1a01
45%,#bf6e4e 100%);
display: inline-block; width: 200px; height: 200px; border-radius: 100%;
font-size: 70px; text-decoration: none; text-align: center; padding-top: 50px;
box-sizing: border-box; font-weight: 900;
box-shadow: 0 8px 0 rgb(183,0,0), 0 15px 20px rgba(0,0,0,.35);
text-shadow: 0 3px 1px rgba(122,17,8,.8);
transition: .4s all ease-in;
}

Here you create the impression of a 3D button by creating two box shadows: one to create the impression
of an edge to the button, and another beneath it as a general shadow. You create the impression of the button
lowering by transitioning four simultaneous actions:

1. Lower the text on the button.


2. Physically lower the entire button by using translate.


3. Reduce the shadow that represents the edge of the button.


4. Reduce and harden the blur of the shadow beneath the entire element.

You’ll do this in a declaration based on the :active pseudo-selector, as shown in Listing 4-26.

Listing 4-26. HTML and CSS to Create a Giant Help Button

.bigbutton:active {
padding-top: 53px;
transform: translate(0, 4px);
box-shadow: 0 4px 0 rgb(183,0,0), 0 8px 6px rgba(0,0,0,.45);
}

It’s also possible to create a button reveal effect, as you’ll see in the next section.

UI Button Reveal Transition

Standard HTML button elements can also be heavily customized with CSS that includes transitions. In this case,
you want a button to expand on hover, revealing a promotional or guiding message inside (see Figure 4-6).

Figure 4-6. A button in two modes, transitioned with CSS3