Clickable Links and the CSS Cascade

Activity: Styling a links as buttons

• Starter code
• MDN: Creating hyperlinks
• Styling links: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links

1. Define a colour palette;
   • Try the 60-30-10 rule;
   • Convert your colours to hsl();
2. Create a simple Call-to-Action with a paragraph and link;
3. Remove the underline with text-decoration;
4. Make the link more “buttony” with padding;
   • optional: add a border and/or round the corners with border-radius;
5. Double-check your colour contrast;
6. Define a complimentary colour for the link :hover and :visited states;
7. Choose a contrasting colour for the link :active state.