The attribute "data-btn-type" can be used with divs to get this premade 3D-looking button partially inspired by Gimkit's GUI.
It can define specific colors, as well as game platforms. When set to "xbox", "nintendo", "playstation", or "steam", It will add that platform's logo as a ::before.
"data-btn-fade" sets a color transition on clicking the button.
"data-btn-smooth" is a boolean value for enabling/disabling smooth transitions (It is true by default).
"data-btn-rounded" is another boolean value (again, true by default) that defines border radius in the buttons.
You may adjust the width of the buttons as necessary.
Below is a list of colors and options available for the 3D buttons.
| Code | Result | Preview |
|---|---|---|
| <div data-btn-type="purple"> | Purple |
button
|
| <div data-btn-type="gold"> | Gold |
button
|
| <div data-btn-type="cyan"> | Cyan |
button
|
| <div data-btn-type="purple" data-btn-fade="cyan"> | Purple > Cyan |
button
|
| <div data-btn-type="red" data-btn-smooth="false"> | Red (No transitions) |
Button |
| <div data-btn-type="gold" data-btn-fade="gold" data-btn-smooth="false"> | Gold > Purple (No transitions) |
Button
|
| <div data-btn-type="cyan" data-btn-fade="gold" data-btn-rounded="false"> | Cyan > Gold (sharp corners) |
Button
|