Skip to content

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.

License

Notifications You must be signed in to change notification settings

Muhammad-Noraeii/CSS-Button-Generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation


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:
    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:

Preview of CSS Button Generator
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:
    git checkout -b feature-name
  3. Commit your changes:
    git commit -m "Add your feature or fix description"
  4. Push to your branch:
    git push origin feature-name
  5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published