Button Demos

Quick preview for button designs from Penpot (or any design tool).

Usage

  1. Export your button HTML/CSS from Penpot
  2. Paste it into buttons.html
  3. View the live preview at the val's HTTP endpoint

What goes in buttons.html

  • Raw HTML button elements
  • <style> blocks with your CSS
  • Inline styles
  • Tailwind classes (loaded automatically)

Example

<style> .my-button { background: #3b82f6; color: white; padding: 12px 24px; border-radius: 8px; } </style> <button class="my-button">Click Me</button>