sButtons / Sbuttons
Projects that are alternatives of or similar to Sbuttons
Logo made by Harshit Sharma
💡 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 <head> tags:
<link rel="stylesheet" href="/path/to/sbuttons.min.css">
CDN
You can use the CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sbuttons/dist/sbuttons.min.css">
NPM
You can install sButtons using NPM:
npm i sbuttons
CSS
You can import the CSS file found in dist/sbuttons.css or 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.less in 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 <button> or <a> tags :
<button class='sbtn basic-btn blue-btn'>Button</button>
Same can be done for <a> tag
<a href='#' class='sbtn basic-btn blue-btn'>Button</a>
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 <button> or <a> tags
<button class="sbtn basic-btn block-btn">Button</button>
Disabled Buttons
To make a <button> or <a> tag disabled, add disabled-btn class as shown below.
<button class="sbtn basic-btn blue-btn disabled-btn">Button</button>
<a class="sbtn basic-btn blue-btn disabled-btn">Button</a>
Icon Buttons
In case of using buttons that have icons in them, make sure to include font awesome's CDN in the <head> tag:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
Base Icon Buttons
The base-icon-btn class 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-btn class gives you a default button with no background color and a border.
<button class="sbtn base-icon-btn">base icon button</button>
Icon Positioned to The Left
Adding the left-icon class to a button makes the icon positioned to the left. For example:
<button class="sbtn base-icon-btn icon-left orange-btn"><i class="fab fa-github"></i>left icon</button>
Icon Positioned to The Right
Adding the right-icon class to a button makes the icon positioned to the right. For example:
<button class="sbtn base-icon-btn icon-right orange-btn"><i class="fab fa-github"></i>right icon</button>
Toggle Button
The toggle-btn class along with the toggle-off-btn / toggle-on-btn state 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-btn class to your checkbox inputs converts them to toggle buttons. For example:
<input type="checkbox" class="sbtn toggle-btn"/>
Toggle Button as Radio Button
Adding the toggle-btn class to your radio inputs converts them to toggle buttons. For example:
<input type="radio" class="sbtn toggle-btn"/>
Dark-Mode Button
The dark-mode class enables you to have a dark mode for a button by adding dark-mode class 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-mode class will make the button work in dark mode.For example:
<button class="sbtn dashed-btn white-btn dark-mode">Dark Mode</button>
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:
<body data-theme="dark"><button class="sbtn dashed-btn orange-btn">Dark-Mode</button></body>
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!