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.learntheweb.courses/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.

---

Details

• 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

---

Goal

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

• Final screenshots in the “screenshots” folder.
• Watch this video to see how it interacts.

---

Hand in

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