:bulb: Simple buttons you can use easily for your next project.
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.
You can download the CSS file here and then add it to your html file inbetween the
tags:You can use the CDN:
You can install sButtons using NPM:
npm i sbuttons
You can import the CSS file found in
dist/sbuttons.cssor
dist/sbuttons.min.css:
@import url('~sbuttons/dist/sbuttons.min.css');
you can also import the LESS file found in
src/sbuttons.less:
@import '~sbuttons/src/sbuttons.less';
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.
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.
To use sButtons with block display, add the class to either
ortags
Button
To make a
ortag disabled, add disabled-btn class as shown below.
Button
Button
In case of using buttons that have icons in them, make sure to include font awesome's CDN in the
tag: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.
The
base-icon-btnclass gives you a default button with no background color and a border.
base icon button
Adding the
left-iconclass to a button makes the icon positioned to the left. For example:
left icon
Adding the
right-iconclass to a button makes the icon positioned to the right. For example:
right icon
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.
Adding the
toggle-btnclass to your checkbox inputs converts them to toggle buttons. For example:
Adding the
toggle-btnclass to your radio inputs converts them to toggle buttons. For example:
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 the
dark-modeclass will make the button work in dark mode.For example:
Dark Mode
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
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!
If you would like to suggest a new button idea, please create a new discussion with the category "idea".
If your project uses sButtons, please submit it here to be added to the list of the websites using it!
Check out our awesome contributors here!