LittleLink Button Builder

January 29, 2025 · View on GitHub

A visual tool to create custom branded buttons for your LittleLink page without writing code. Designed with accessibility in mind, this tool helps ensure your custom buttons maintain LittleLink's high standards for contrast and visibility.

✨ Features

Visual Editor

  • Live button preview in both light and dark themes
  • Real-time WCAG contrast checking
  • Automatic border suggestions for better visibility
  • Copy/paste ready to go code

Accessibility First

  • Automatic WCAG contrast ratio calculations
  • Smart border recommendations for better visibility
  • Accessibility scores for both light and dark themes

Brand Ready

  • Quickly preview a brand icon
  • Color picker with hex code input
  • Generates code that matches LittleLink's styling
  • Follows LittleLink's button design patterns

🚀 How to Use

  1. Design Your Button

    • Enter your button text and URL
    • Choose your brand colors
    • Upload your icon
    • Preview in both light and dark modes

  2. Check Accessibility

    • Review contrast scores
    • Automatically applies strokes if needed
    • Test visibility in both themes

  3. Add to LittleLink

    • Copy the generated CSS code to css/brands.css
    • Copy the generated HTML code to index.html
    • Add your icon file to images/icons folder

💡 Tips

  • For best results, use SVG icons that are at 24x24px when you add them to images/icons.
  • Test your button in both light and dark themes
  • Consider using suggested strokes for better visibility
  • Keep button text concise and descriptive (i.e. Bluesky)

🔗 Try It Now

Access the Button Builder | Built for LittleLink

CleanShot