sButtons/ sbuttons
About the developer
195 Stars 
465 Forks 
MIT License 
3.2K Commits 
16 Opened issues 
Description
:bulb: Simple buttons you can use easily for your next project.
Services available
Contributors list
Logo made by Harshit Sharma
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
<!-- ALL-CONTRIBUTORS-BADGE:END -->
:bulb: Simple buttons you can use easily for your next project.
Contents
Installation
Download CSS File
You can download the CSS file here and then add it to your html file inbetween the
tags:CDN
You can use the CDN:
NPM
You can install sButtons using NPM:
npm i sbuttons
CSS
You can import the CSS file found in
dist/sbuttons.cssor
dist/sbuttons.min.css:
@import url('~sbuttons/dist/sbuttons.min.css');
LESS
you can also import the LESS file found in
src/sbuttons.less:
@import '~sbuttons/src/sbuttons.less';
Modifying Button Colors
To modify button colors, import
src/sbuttons.lessin your Less file, then make changes to the variables after the import.
For example, to change the blue color to a different shade
@import '/path/to/sbuttons.less';@blue: #54a2bd; /* Make it darker */
Check out _variables.less for the full list of variables.
Usage
To use sButtons in your project , just add the classes of sButton you want to either
ortags :
Button
Same can be done for
tag
Button
You can find all classes and their corresponding sButtons mentioned in our website.
Block Buttons
To use sButtons with block display, add the class to either
ortags
Button
Disabled Buttons
To make a
ortag disabled, add disabled-btn class as shown below.
Button
Button
Icon Buttons
In case of using buttons that have icons in them, make sure to include font awesome's CDN in the
tag:Base Icon Buttons
The
base-icon-btnclass enables you to have a normal, customizable button. Using it, you decide to add any fontawesome icon in it. You can choose to either place it on the left or right side of the button with the available classes.
Icon With No Background
The
base-icon-btnclass gives you a default button with no background color and a border.
base icon button
Icon Positioned to The Left
Adding the
left-iconclass to a button makes the icon positioned to the left. For example:
left icon
Icon Positioned to The Right
Adding the
right-iconclass to a button makes the icon positioned to the right. For example:
right icon
Toggle Button
The
toggle-btnclass along with the
toggle-off-btn/
toggle-on-btnstate class enables you to have a toggle button. Apart from the basic use, it can also be used for checkboxes and radio buttons. While not necessary, you can use the available state classes to choose whether your checkboxes and radio buttons are checked or not.
Toggle Button as Checkboxes
Adding the
toggle-btnclass to your checkbox inputs converts them to toggle buttons. For example:
Toggle Button as Radio Button
Adding the
toggle-btnclass to your radio inputs converts them to toggle buttons. For example:
Dark-Mode Button
The
dark-modeclass enables you to have a dark mode for a button by adding
dark-modeclass to the button or by adding
data-theme="dark"to a container element like the body element.
Adding dark-mode as a class
Adding the
dark-modeclass will make the button work in dark mode.For example:
Dark Mode
Adding dark-mode as an attribute
Adding the
data-theme="dark"as an attribute to a body element .It can be added to any container element of the button.For example:
Dark-Mode
Contribution
Please see the contributing guidelines for details.
You can also join or start discussions with the community members if you have any ideas or questions!
Button ideas
If you would like to suggest a new button idea, please create a new discussion with the category "idea".
Projects Using sButtons
If your project uses sButtons, please submit it here to be added to the list of the websites using it!
Contributors
Check out our awesome contributors here!