https://github.com/alyshukry/chrome-button
✨ Chrome-style UI buttons with metallic gradients, for you to use on your apps.
https://github.com/alyshukry/chrome-button
button chrome component css design html metal metallic modern steel style svg ui
Last synced: about 2 months ago
JSON representation
✨ Chrome-style UI buttons with metallic gradients, for you to use on your apps.
- Host: GitHub
- URL: https://github.com/alyshukry/chrome-button
- Owner: alyshukry
- License: mit
- Created: 2025-07-10T00:13:38.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-10T00:50:37.000Z (12 months ago)
- Last Synced: 2025-07-10T10:06:00.692Z (12 months ago)
- Topics: button, chrome, component, css, design, html, metal, metallic, modern, steel, style, svg, ui
- Language: CSS
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ✨ Chrome Button Component
A chrome-style UI button with metallic gradients, designed by [@pxdx.studio](https://www.instagram.com/p/DHCNFL8Aciw/?igsh=MTdmd3VubXRtbnAzZg==) (and slightly edited) for use in your apps and projects.
## 💡 How to Use
1. Download the CSS file or add it to your project.
2. Copy the SVG gradient and include it in your HTML file.
3. Add the class `chrome` to any element you want styled.
4. Add the class `button` to make the button press in when hovered.
5. To edit the width and height of your element, either:
- Change the variable values in the `.chrome` style.
- Or override them for your specific element, like so:
```css
.chrome.my-button {
--width: 5rem;
--height: 2.5rem;
} /* Sets the size for elements with the class '.my-button' */
.my-button {
width: var(--width) !important;
height: var(--height) !important;
}
```
----------
**License:** MIT
**Contributing:** Contributions are welcome! Please feel free to submit a pull request.