Launch

Building a Button

The link at the top of this page is a plain-jane, run-of-the-mill, vanilla, nothing-special link. But it can be so much more! Let's turn it into something to write home about!

Setting Ourselves Up

To get started, let's use a bit of positioning to keep that link visible on the page where we can see it as we continue working through this exercise.

  1. Create and link a stylesheet for this exercise.
  2. Make a ruleset that selects the <header> element, with the following rules:

This creates a fixed page header, but it's covering our page content. We can fix that.

  1. Add a selector for the <body> element, and set padding-top to be the same as our <header> height.

Now let's center the link in our page header. Instead of using padding or margin to push the link around, we'll use absolute positioning. This link is not going to be styled like a standard link, so it's best if we give it a class rather than just selecting by tag name.

  1. In the HTML, add class="launch-button" to the <a> element.
  2. In your stylesheet, add a selector for .launch-button with the following styles:

The link is now in the middle of the header... sort of. It's actually a bit low and to the right because we've positioned its top-left corner at the center. To truly center the link, we need to offset it by half its own width and height. We'll use the transform property to achieve this.

  1. Add the following to your .launch-button selector:

The link is now exactly centered, even though we don't know its exact dimensions. This technique is useful for centering an absolutely positioned element within its container.

This approach might seem counterintuitive because it looks like we're moving the link left by 50% and then back right by 50%. The key is understanding that the percentages in left and top are relative to the parent container, while the percentages in transform are relative to the element itself.

Time to style the link to look more like a button.

Making It Button-Like

Let's remove some default link styles and add button styles.

  1. In the .launch-button ruleset, add:

To enhance the interactive feel, we'll add :hover and :active states.

  1. Create a new ruleset for .launch-button:hover and add:
  2. Create another ruleset for .launch-button:active and add:

The box-shadow property adds a glowing effect. You can read more about it in the documentation or use a box-shadow generator.

Adding an Icon

We'll use Font Awesome to add icons and the transform property to animate them. The Font Awesome library is already included in the <head> section.

  1. Inside the <a class="launch-button"> element, right after the word "Launch" but before the closing </a> tag, add: 
    <div class="rocket">
  <i class="fas fa-burn"></i>
  <i class="fas fa-rocket"></i>
</div>

The <i> tag is used by Font Awesome to display icons. We've added two icons: "burn" and "rocket."

Let's position these icons appropriately.

  1. Create a selector for .launch-button .rocket and set:
  2. Create a selector for .launch-button .rocket i and set:

Now, use transform to arrange them:

  1. Select .launch-button .fa-rocket and set:
    • transform: translate(-50%, -50%) rotate(-45deg);
  2. Select .launch-button .fa-burn and set:
    • transform: translate(-50%, -15%) rotate(180deg) scale(0.3);
    • color: orange;

Adjust the padding of the button to make room for the rocket:

  1. In the .launch-button ruleset, change padding to 15px 60px 15px 30px;.
  2. In .launch-button .rocket, add:

Add interactive effects to the flame:

  1. In .launch-button .fa-burn, change scale(0.3) to scale(0.1).
  2. Create a ruleset for .launch-button:hover .fa-burn and set:
    • transform: translate(-50%, -15%) rotate(180deg) scale(0.4);
  3. Create a ruleset for .launch-button:active .fa-burn and set:
    • transform: translate(-50%, 25%) rotate(180deg) scale(0.8);

Make the rocket grow on hover:

  1. Create a selector for .launch-button:hover .rocket and add:
    • transform: scale(1.3);

Launching the Rocket

Let's create a background and animate the rocket on click.

  1. In the <header> selector, replace background with:
    • background: linear-gradient(to bottom, #000000 40%, #0560aa 80%, #7cd4ef 100%);
  2. In .launch-button, change top to 75%;
  3. In .launch-button:active, add:
    • transform: translate(-50%, -20%) scale(0.7);
    • padding: 15px 30px;
  4. Create a selector for .launch-button:active .rocket and add:
    • transform: rotate(-15deg) translate(60px, -140px) scale(3.5);

Enhance the button label:

  1. Wrap "Launch" in a <span class="label"> tag.
  2. Create a selector for .launch-button .label and add:
    • letter-spacing: 0.1em;
    • text-transform: uppercase;
    • color: white;
  3. Create a selector for .launch-button:hover .label and add:
    • color: orange;
    • text-shadow: 0 0 3px rgba(251, 255, 0, 0.5);

Adding Transitions

We'll use CSS transitions to smooth out the animations.

  1. In .launch-button, add:
    • transition: transform 0.5s, background-color 0.1s, padding 0.5s, box-shadow 0.1s;
  2. In .launch-button .rocket, add:
    • transition: transform 0.5s;
  3. In .launch-button .label, add:
    • transition: color 0.2s, text-shadow 0.2s;
  4. In .launch-button .fa-burn, add:
    • transition: transform 0.4s;

Adding Animations

Finally, let's create a continuous animation for the flame during the rocket launch.

  1. Add the following keyframes to your stylesheet: 
    @keyframes burn {
  from { transform: rotate(-7deg); }
  33%  { transform: rotate(4deg); }
  66%  { transform: rotate(-4deg); }
  to   { transform: rotate(7deg); }
}
  2. Create a selector for .launch-button:active .fa-burn::before and add:
    • display: block;
    • transform-origin: center bottom;
    • animation-name: burn;
    • animation-duration: 0.1s;
    • animation-iteration-count: infinite;
    • animation-direction: alternate;

Now, when you press the button, the flame will have a flickering effect.

Our mission is complete. In the process of styling this button, we've introduced linear gradients, box shadows, text shadows, transforms, transitions, and animations. Each of these has tremendous capability and flexibility, and you should treat this as only a single example of how and where they might be applied. While we used them for a button, there's nothing that says they can't be used elsewhere and in infinite combinations. Explore!