3D Button with Shading (Experiment)

Experimenting 3D Button with Shading

I'm just experimenting with shading, and coloring.

I used the colors in "assets" for the colors of these buttons.

The colors of the buttons are just inspired by most of the CSS frameworks out there. As well as the naming of the classes.

This list is the allowed class name for the buttons

1. btn
2. btn btn-info
3. btn btn-success
4. btn btn-warning
5. btn btn-error
6. btn btn-dark

I just did similar shading technique with my previous pen. Please check it if you haven't yet.

The font color, background-color, and the border-color is customizable by adding class attribute on the HTML element, or by setting it on the CSS class.

As of now, I allowed these 3 variables to be customizable:

1. color
2. background-color
3. border-color

Example usage

<!--This is the default usage, where we can use the prepared color by its class name-->
<button class="btn btn-info">Information button</button>

<!--This is the altered usage, by setting the style attribute of the HTML element-->
<button class="btn" style="--background-color: green;">Information button</button>

IF YOU WANT TO USE THIS STYLE, PLEASE READ THIS

This is written in SCSS. If you would like to use the CSS, you may compile the code, then use the CSS style on your own project.

Please take note that the code above the block of comment:

STYLES RELATED TO EXPERIMENT BUTTONS

is just for the styling of the page. These are not related to the styles of the buttons. So after compiling to CSS, you may just take the part on or below the said block of comments.

You may also customize the colors of the buttons, or actually add a new class for the buttons, by editing the $btn-type map before compiling the source code into CSS.