ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS
Your HTML will consist of three elements: a button with two span tags inside it. You can see the markup in
Listing 4-27.
Listing 4-27. HTML for a Reveal Button
■Tip A Unicode character is far more adaptable and easier to control than an image when used for the right side
of your UI element. I’ve used a decimal entity character here to represent a black rightward (A great resource for
Unicode characters can be found at copypastecharacter.com.)
Next, you’ll add the CSS to set up your button appearance (Listing 4-28).Listing 4-28. Basic CSS for a Reveal Button
- {box-sizing: border-box;
color: #333; font-family: Futura, Arial, sans-serif;
}
button {
font-weight: 600;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.3);
border-radius: 34px; height: 68px; width: 180px;
padding: 0 20px; font-size: 18px;
background: linear-gradient(to bottom, #1e5799,#7db9e8);
border: 1px solid rgba(0,0,0,0.4);
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset,
1px 1px 3px rgba(0, 0, 0, 0.2),
0px 0px 0px 4px rgba(188, 188, 188, 0.5);
text-align: left;
}
span.hidden, span.right { color: #fff; }
span.right { padding-left: 18px; }
span.hidden {background: linear-gradient(to bottom, #222, #000);
display: inline-block; width: 0; margin-left: 22px;
overflow: hidden;
white-space: nowrap; padding: 22px 0;
border-left: 2px double rgba(0,0,0,0.3); }
Because the .hidden span is set to box-sizing: border-box, white-space: nowrap, overflow: hidden,
and width: 0, you only see its border on the left side under normal conditions.
You want multiple transition events to happen at the same time and in the same motion. While you could
place the transition properties inside separate declarations, it’s often more efficient to place them as high in the
CSS as possible.