A comprehensive collection of beautifully designed, modern CSS "Download" buttons. This kit provides over 50 unique button styles, ready to be dropped into your web projects. Elevate your UI with diverse aesthetics, sleek hover effects, and responsive designs.
- 50+ Unique Styles: A wide array of modern button designs, from minimalist to vibrant gradients, frosted glass, and playful shapes.
- Pure CSS: No JavaScript dependencies, just clean, efficient CSS.
- Easy to Use: Simply copy the HTML and CSS for the button you like.
- Modern Aesthetics: Designed with contemporary UI trends in mind.
- Hover Effects: Each button comes with a unique, smooth hover transition.
- Lightweight: Optimized for performance without compromising on style.
-
Using these buttons in your project is incredibly simple:
-
Clone or Download:
git clone https://github.com/khdxsohee/Modern-Button-Kit.git
- Or download the ZIP file directly from the GitHub repository.
-
Copy the style.css (or the relevant <style> block content if you're using it directly) from this repository into your project. You can either:
-
Directly copy the <style> block into the section of your HTML file.
-
Create a style.css file in your project and paste all the CSS into it, then link it in your HTML:
<link rel="stylesheet" href="path/to/your/style.css">
- Add the HTML:
- Browse through the modern-button-kit.html file (or your copied buttons.html file) in this repository. Find the button you want, copy its tag, and paste it into your HTML where you want the button to appear.
<button class="download-button button-primary">Download</button>
(Remember that the download-button class sets up basic styling, and additional classes like button-primary apply the unique styles.)
Here's a sneak peek at some of the styles included in the kit:
(You can either embed a screenshot here or link to a live demo if you deploy it)
- Primary Blue (Solid, classic)
- Success Green (Vibrant, actionable)
- Gradient Purple-Pink (Eye-catching, modern)
- Pill Shape (Soft, friendly)
- Frosted Glass (Trendy, transparent)
- Teal Outline (Minimalist, elegant)
- Radiant Gold (Premium, bold)
- Skewed Rectangle (Unique, dynamic)
- Subtle 3D Push (Interactive, tactile)
- ...and many more!
We welcome contributions to ModernButtonKit! If you have a beautiful button style you'd like to add:
- Fork this repository.
- Create a new branch (git checkout -b feature/your-new-button).
- Add your button's HTML and CSS.
- Commit your changes (git commit -m 'feat: Add new awesome button style').
- Push to the branch (git push origin feature/your-new-button).
- Open a Pull Request.
- Please ensure your code is clean, well-commented, and follows existing naming conventions.
This project is licensed under the MIT License. See the LICENSE file for more details.
If you have any questions or need assistance, feel free to open an issue in this repository.
