Gradient Buttons

This is a lightweight (💪 6.5 kb) css gradient button library for web development. It has many color options and helper classes that can change the view (border, size, display icon etc). It is very simple to use. Just add a stylesheet to your html file and start using the buttons 😎.

#1 Basic Usage

Download gradient-buttons here.

You will need to include the gradient-buttons.min.css file in your page. That's it 🤓.

<link rel="stylesheet" href="gradient-buttons.min.css"/>
<!-- Or Cdn -->
<link rel="stylesheet" href=""/>
#2 Create Gradient Button

You must first add the g-btn class to the html element to create the button, then add the class of the button you selected. Like this .g-btn .g-btn--blue

<button class="g-btn g-btn--blue">Blue Button</button>


#3 Size Of Button

You can use three helper classes to change the size of the buttons.

<button class="g-btn g-btn--orange u-x-large">X Large</button>
<button class="g-btn g-btn--orange u-large">Large</button>
<button class="g-btn g-btn--orange">Default</button>
<button class="g-btn g-btn--orange u-small">Small</button>


#4 Add Border Radius

You can use three helper classes to add border radius of the buttons.

<button class="g-btn g-btn--dark-green">Default</button>
<button class="g-btn g-btn--dark-green radius-sm">Radius Sm</button>
<button class="g-btn g-btn--dark-green radius-md">Radius Md</button>
<button class="g-btn g-btn--dark-green radius-lg">Radius Lg</button>


#5 Add Border

You can add .has-border class to add border of the buttons. Now you have cool buttons 😁.

<button class="g-btn g-btn--white has-border">White</button>
<button class="g-btn g-btn--light-blue has-border">Light Blue</button>
<button class="g-btn g-btn--pink has-border">Pink</button>


#6 Fluid Buttons

You can add .u-block class to create a button with full width.

<button class="g-btn g-btn--blue u-block">Blue</button>
<button class="g-btn g-btn--red u-block">Red</button>
<button class="g-btn g-btn--aqua u-block">Aqua</button>


#7 Disabled Buttons

You can add .disabled class to add give the button disabled view.

<button class="g-btn g-btn--light-purple disabled">Light Purple</button>
<button class="g-btn g-btn--dark-blue disabled">Dark Blue</button>
<button class="g-btn g-btn--purple disabled">Purple</button>


#8 Mixing The Classes

You can create better-looking buttons by adding different classes.

<button class="g-btn g-btn--light-blue radius-lg has-border">Light Blue</button>
<button class="g-btn g-btn--yellow radius-md">Yellow</button>
<button class="g-btn g-btn--dark-red radius-sm has-border">Dark Red</button>
<button class="g-btn g-btn--purple radius-sm u-small">Purple</button>
<button class="g-btn g-btn--white radius-sm has-border u-big u-block">White</button>
<button class="g-btn g-btn--dark-green radius-sm has-border u-block">Dark Green</button>
<button class="g-btn g-btn--light-blue radius-sm u-block">Light Blue</button>
<button class="g-btn g-btn--faded-purple u-small u-block">Faded Purple</button>


#9 Using With Fontawesome

You can use the buttons with FontAwesome. Use .g-btn__left-icon to add icon to the left of the button, use .g-btn__right-icon to add it to the right.

<button class="g-btn g-btn--blue"><i class="fa fa-user g-btn__left-icon"></i>Sign Up</button>
<button class="g-btn g-btn--dark-green">Sign In<i class="fa fa-check g-btn__right-icon"></i></button>
<button class="g-btn g-btn--dark-red">Log Out<i class="fa fa-times g-btn__right-icon"></i></button>


#10 List Of Simple Gradient Buttons

In the Buttons you can see the classes they belong to.




















#11 List Of Colorful Gradient Buttons

In the Buttons you can see the classes they belong to.