A chrome-style UI button with metallic gradients, designed by @pxdx.studio (and slightly edited) for use in your apps and projects.
-
Download the CSS file or add it to your project.
-
Copy the SVG gradient and include it in your HTML file.
-
Add the class
chrome
to any element you want styled. -
Add the class
button
to make the button press in when hovered. -
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:
-
.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.