ashtastic / button-styles

A CSS code exercise looking at using multiple classes to create consistent styles.

summary	time	deliverables
A CSS code exercise looking at using multiple classes to create consistent styles.	1 hour	1 HTML file, 1 CSS file

Button styles

Overview

• Fork this repository.
• The index.html and main.css files are started for you.
• Copy and paste the button sample inside index.html to make all the other buttons.
• Remember to use multiple classes on the buttons where necessary to reduce as much CSS duplication as possible.
• Run it through Markbot and make sure it passes all the checks.

---

Details

• Text sizes: 1.125rem, .875rem, 1.5rem
• Colours: #fff, #000, #333, #666, #ccc, #f33, #933
• Button padding: .4em .75em .3em
• Button corner radius: 8px
• Button border width: 3px
• Expected class names: .btn, .btn-small, .btn-big, .btn-subtle, .btn-ghost, .btn-warning

---

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 to Canvas using Markbot.