CSS Button Builder + Real Button Challenges

Step-by-Step CSS Demo

Click “Next” to add one CSS line at a time. Notice how each line changes the button.

Current CSS:

Your Challenges

Try to recreate each button below using your own CSS!

1. Uber Button

Colors used: background: rgb(0,0,0), text: rgb(255,255,255)

2. Amazon “Add to Cart”

Colors used: background: rgb(255,216,20)

3. GitHub Sign Up

Colors used: background: rgb(46,164,79), text: rgb(255,255,255)

4. Get Started / Download

Colors used:
Get started: rgb(121,82,179)
Download text/border: rgb(108,117,125)

5. Apply / Save

Colors used:
Apply: rgb(10,102,194)
Save border/text: rgb(10,102,194)

6. Subscribe / Join / Tweet

Colors used:
Subscribe: rgb(200,0,0)
Join border/text: rgb(41,118,211)
Tweet: rgb(2,158,255)