Buttons

A small UI playground showcasing modern, animated button styles for web projects.[web:6]
Live demo: https://buttons-umber.vercel.app

Features

• Multiple button variants (primary, secondary, destructive, outline, ghost, link).[web:6]
• Extra visual “effects” such as shine, ring hover, expand icon, gooey gradients, and animated underlines.[web:6]
• Different sizes (default, small, large, icon) to fit various layouts.[web:6]
• Built with a single, extensible button component so styles are easy to reuse in other projects.[web:6]

Tech Stack

• HTML/CSS and modern utility classes for layout and effects.
• Deployed on Vercel for quick previews and sharing.[web:4]

Getting Started

1. Clone the repository:

   git clone https://github.com/Tusharxhub/buttons.git
   cd buttons
   

2. Open the main HTML file in your browser (for example index.html) to view the buttons gallery.

3. Copy any button markup and corresponding CSS into your own project to reuse a design.

Usage

• Pick a button style from the demo and copy its HTML and CSS into your project.
• Adjust text, icons, and colors to match your design system.
• For frameworks (React, Next.js, etc.), wrap the button markup into a component and pass children/onClick as props.

Roadmap

• Add more button presets (loading states, icon-only, social buttons).
• Document each variant with short code snippets.
• Add dark/light mode examples.