30 Days of CSS Girls

March 01, 2019

Heart Button

Let’s create a heart button today.

Objectives

Create a heart button such as:

Original design: Favorites by Yi Jung Lai.

  • hovers to trigger a “highlighted” state, i.e., a different heart color, etc
  • clicks to trigger a “pressed down” state

Reading

Box Model and Visual Formatting Model.

(Chapters 8 and 9 of Cascading Style Sheets Level 2)

Chapter 9 is a bit crazy, but very rewarding to read. Please be patient with it :)

Questions

  • What are content box, margin box, border box, padding box, respectively?
  • What is collapsing margin and what would you do to avoid it?
  • What are containing blocks, block-level elements, and block boxes?
  • What are positioned elements?
  • Explain “normal flow” :)