Button Builder App

Free Button Builder is a web-based tool designed to help users visually create custom CSS buttons without writing any code. The interface is clean and intuitive, divided into three main panels:

• Style Controls – Users can adjust button text, font color, background color, border radius, padding (X and Y), font size, and more through sliders and color pickers.

• Advanced Styling – Options include font weight, border width and color, and box shadow settings (X, Y, blur, spread, and color), allowing for detailed button design.

• Preview & Code – A live preview of the button updates in real-time, and the corresponding CSS and HTML code is generated instantly for easy copying and integration.

Perfect for designers, developers, or beginners, this tool makes button creation simple, fast, and highly customizable.

📗 Table of Contents

• 📖 About the project
  • 🛠 Built with
    • Tech stack
    • Key features
  • 🚀 Live demo
• 💻 Getting started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👷 Author
• 🔭 Future features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 About the project

Free Button Builder is a responsive React + TypeScript web application that allows users to dynamically generate styled HTML buttons with real-time visual feedback. Built with Vite for fast development and hot module replacement, the app focuses on modularity, interactivity, and ease of customization. It employs a centralized CSS file (App.css) to maintain consistent styling across components, promoting reusability and simplifying design updates.

🛠 Built with

Tech stack

Languages and technologies

• React.js
• TypeScript
• HTML
• CSS
• Git
• Vite

Key features

• [Real-Time Button Customization]
• [Auto-Generated CSS & HTML Code]
• [Responsive Design]

(back to top)

🚀 Live demo

• Live Demo Link

(back to top)

💻 Getting started

To get a local copy up and running, follow these steps.

Setup

Clone this repository to your desired folder:

git clone https://github.com/J-C-S-V/button-builder.git

Install

npm install.

Usage

npm run dev.

Run tests

Tests will be added in the future.

Deployment

You can deploy this project using:

• Netlify

(back to top)

👷‍♂️ Author

👷‍♂️ Juan Sanchez

• GitHub: Juan Sanchez
• Twitter: Juan Sanchez
• LinkedIn: Juan Sanchez

(back to top)

🔭 Future features

• [Hover effects]
• [Animations]
• [Responsive design]

(back to top)

🤝 Contributing

Make the app better. Contributions, issues, and feature requests are welcome! 😀

Fork this repository and create a pull request to add your changes.

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you get inspired by this project you can give it a star here on Github 🙌

(back to top)

📝 License

This project is MITlicensed.

(back to top)