January 31 – Challenge #2

Challenge 1: “Show Love” Button Design

Show Love Button

Recreate this button using only CSS and the following HTML: <body><button> Show Love</button></body>. You may not use ANY images. Submit a single html file that contains an internal style sheet. Remember that the example above is just an image and does not show any interaction; it is up to you to decide an appropriate user feedback and interaction.

In addition to submitting your coded solution provide a written explanation of how you tackled this problem. It is not uncommon to have a hard technical test in an interview where the purpose is to demonstrate your thought process and problem solving skills and not necessarily a perfect solution.

Hints

  • Hint 1: Multiple Borders
  • Hint 2: HTML Entities
  • Hint 3: Pseudo Elements
  • Hint 4: Text Shadow & Text Transform
  • Hint 5: CSS Gradients