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 😎.
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="https://raw.githubusercontent.com/ysoftaoglu/GradientButtons/master/gradient-buttons/gradient-buttons.min.css"/>
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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>
Output:
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>
Output:
In the Buttons you can see the classes they belong to.
.g-btn--light-blueIn the Buttons you can see the classes they belong to.
.g-btn--yellow-to-purple