https://github.com/muhammad-noraeii/css-button-generator
CSS Button Generator is a user-friendly tool for creating customizable CSS buttons, allowing users to adjust appearance and hover effects, and generate CSS code easily.
https://github.com/muhammad-noraeii/css-button-generator
button button-generator css css-generator css3 generator html html5 javascript
Last synced: 2 months ago
JSON representation
CSS Button Generator is a user-friendly tool for creating customizable CSS buttons, allowing users to adjust appearance and hover effects, and generate CSS code easily.
- Host: GitHub
- URL: https://github.com/muhammad-noraeii/css-button-generator
- Owner: Muhammad-Noraeii
- License: other
- Created: 2025-01-17T19:33:13.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-01T15:20:15.000Z (4 months ago)
- Last Synced: 2025-03-12T11:16:23.288Z (2 months ago)
- Topics: button, button-generator, css, css-generator, css3, generator, html, html5, javascript
- Language: JavaScript
- Homepage:
- Size: 29.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
# CSS Button Generator
CSS Button Generator is a simple and user-friendly tool that helps developers and designers create beautiful and customizable CSS buttons with ease. This tool allows users to adjust button appearance, hover effects, and generate ready-to-use CSS code.
## Features
### 🎨 **Appearance Customization**
- **Background Options**:
- Solid colors or gradient backgrounds.
- **Border Settings**:
- Adjustable border radius and width.
- **Font Customization**:
- Change text color, font family, and font size.
### 🖱️ **Hover Effects**
- Add hover animations like:
- Scaling.
- Opacity changes.
- Shadow effects.
- Background transitions.
### 🛠️ **Live Preview**
- Instantly preview your customized button design in real-time.
### 📜 **CSS Code Generator**
- Automatically generates the CSS code for your customized button.
- Copy and paste the code directly into your project.
## How to Use
1. **Clone or Download** the repository:
```bash
git clone https://github.com/Muhammad-Noraeii/CSS-Button-Generator.git
```
2. Open the `index.html` file in your browser.
3. Customize the button using the tool:
- Adjust appearance settings (background, font, border).
- Apply hover effects as needed.
4. Copy the generated CSS code from the code section.
## Preview
Here's how the tool looks:
*Note: This is first version of CSS Button Generator*
## Technologies Used
- **HTML5**
- **CSS3**
- **JavaScript**
## Contributing
Contributions are welcome! If you have ideas to improve this project, feel free to fork the repository and submit a pull request.
### Steps to Contribute
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature-name
```
3. Commit your changes:
```bash
git commit -m "Add your feature or fix description"
```
4. Push to your branch:
```bash
git push origin feature-name
```
5. Open a pull request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.