Homework

Big Red Button

Create a web page with a single, red button (use a <button> element). Make it look intimidating, maybe it says 'Do not push this button' or 'danger' or something. Put it in the center of the page.

Using CSS animations (no JS!) make it dynamic and intimidating.

• Use a drop-shadow around it that makes it stand out or glow. Make that shadow glow and darken in repeated pulses

• When you hover over it, make it slowly get brighter and bigger. When you move the mouse away it should shrink back slowly.

• Make the drop-shadow pulse faster when you hover over it.

• Change the mouse cursor when you hover over it.

Notes

HTML button elements have a lot of default styles applied to them by browsers. Use the browser dev tools to figure out what those are so that you can reset or override them.

Resources

• CSS Transitions

• CSS Animations