Doomsday Button Lab

Introduction

Someone, perhaps a Mad Scientist, has foolishly placed the Doomsday Button right next to the Coffee Button.

Objective

For this lab, your mission is to make the doomsday button standout and warn the user it they are about to press it.

Requirements

Follow the requirement below to make the doomsday button standout and warn the user.

  1. Download the Doomsday Button Starter Files.
  2. You will only be making changes to the style.css file. The index.html and base.css files should not be changed.
  3. Use the transition, transform and animation properties as well as the animation techniques you have learned to make the the doomsday button standout. At least two CSS properties should be animated.
  4. Warn the user that they hovering over the Doomsday Button by adding additional animations to the button. At least two CSS properties should be animated and a different animation should be used.
  5. Make the Doomsday button, a deadman's switch. If the button is pressed, give the user an opportunity to cancel the activation of the Doomsday Device, by releasing the button, but warn the user that they are pressing the button.
  6. Even a Mad Scientist like things to look appealing. Make sure your choices of animations fit well with the current button designs.

Bonus

For 2 extra points, if the Doomsday Button is pressed long enough, animate the Doomsday Device going off!