anshori

Quick Form Styling

Explanation

Checkbox

  • State 1: not-checked default - border: #CDCDCD 60%, check: none
  • State 2 & 8: not-checked & hover - border: #BDBDBD 100%, check: #E3E3E3
  • State 3: not-checked & active - border: #BDBDBD, outline: #2469F6 3px, check: #878787
  • State 5: checked default - bg: #2469F6, border: #2469F6, check: #FFFFFF
  • State 4 & 6: checked & hover - bg: #5087F8, border: #5087F8, check: #FFFFFF
  • State 7: checked & active - bg: #2469F6, border: #2469F6, outline: #2469F6 3px 10%, check: #FFFFFF

Button

  • State 1: default - bg: #FFCE22
  • State 2: hover - bg: #FFD84D
  • State 3: active - bg: #FFCE22