Lab
Doomsday ButtonIntroduction
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.
- Download the Doomsday Button Starter Files.
- You will only be making changes to the
style.css
file. Theindex.html
andbase.css
files should not be changed. - Use the
transition
,transform
andanimation
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. - 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.
- 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.
- 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!