Customizable Gradient Button Using Function and Map in SCSS (CSS Loop)

#codepen #html #css #showdev

This is a customizable gradient button built in SCSS or Sass.

I used CSS loop technique through the Sass map, so that I could shorten the Sass source code.

The gradient is animated by just moving the x-axis background position, 100% to the left.

This comes with 3 styles:
Normal
Rounded
Pseudo-3D

But you can combine the rounded and pseudo 3D.

The basic usage is like this:<
<button class="btn-gradient btn-gradient-{color>BUTTON</button>

The available colors:
btn-gradient-blue
btn-gradient-green
btn-gradient-yellow
btn-gradient-red
btn-gradient-light
btn-gradient-dark

You may add another colour or style on the Sass map, to add another colour.

Adding 'btn-gradient' is important, for the common style of the buttons. I could add it on the CSS loop, but, it will make the compiled CSS source code longer, and also it will be harder to customize when compiled.

Usage of another style:
<button class="btn-gradient btn-gradient-blue btn-gradient-round">ROUND</button>
<button class="btn-gradient btn-gradient-blue btn-gradient-3d">PSEUDO 3D</button>
<button class="btn-gradient btn-gradient-blue btn-gradient-round btn-gradient-round-ed">ROUND 3D</button>