summary	time	deliverables	download
An exercise making a banner with a button that transitions to hover & active states.	1 hour	1 HTML file, 4 CSS files, images	https://assets.learn-the-web.algonquindesign.ca/web-dev-3/but-em-buttons-download.zip

But ’em buttons

Overview

Fork this repository.
Duplicate the design & interactivity of the banner with :hover & :active states—and transition.
transform isn’t used anywhere in main.css to complete the functionality—mostly just position.
The bottom, 3D, part of the button is another element inside the .btn <a> tag that’s positioned. It has a height that is manipulated.
Export & save the two graphics properly from Photoshop & Illustrator.
Text can be found inside the content.txt file.
Run it through Markbot and make sure it passes all the checks.

Typefaces: Ubuntu Condensed
Colours: #fff, #90ccc3, #b4fff4, rgba(255, 255, 255, .7), rgba(180, 255, 244, .2)
Expected class names: .btn, .btn-ghost, .icon, .i-32, .height-win-full or .h-w-1
Gridifier settings: defaults
Typografier settings: defaults
Modulifier settings: select all
Image: starfield.png (800px, 800px), rocket.svg

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.