Get Started with sButtons
Download CSS File
You can download the CSS file
here and then add it to your
html file in between the tags.
Download the file and link it as a stylesheet in between your <head>
tags, as shown below.
<link rel="stylesheet" href="/path/to/sbuttons.min.css">
Make sure to replace
"/path/to/sbuttons.min.css" with the path you stored it in.
CDN
Or instead of downloading the file, you can use the CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sbuttons/dist/sbuttons.min.css">
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">NPM
You can install sButtons using NPM:
npm i sbuttonsCSS
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/_variables.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/_variables.less';@blue: #54a2bd; /* Make it darker */
Check out _variables.less for the full list of variables.
Basic Button
<button class="sbtn basic-btn blue-btn">Button</button>
You can find all classes and their corresponding sButtons mentioned in our Examples page.
Block Buttons
<button class="sbtn basic-btn block-btn">Button</button>Disabled Buttons
<button class="sbtn basic-btn blue-btn disabled-btn">Button</button><a class="sbtn basic-btn blue-btn disabled-btn">Button</a>Base Icon Button
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 icon-btn class alone gives you a default button with no background color and a
border.
<button class="sbtn icon-btn"><i class="fas fa-book"></i></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="fas fa-book"></i>To the Left</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">To The Right<i class="fas fa-book"></i></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:
Select favourite car brand :
<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 div element.
Adding dark-mode as a class
Adding the dark-mode class :
<button class="sbtn dashed-btn orange-btn dark-mode">Dark-Mode </button>Adding dark-mode as an attribute
Adding the
data-theme="dark" as an attribute to a div element. It can be added to any
container element
of the button.
<body data-theme="dark"><button class="sbtn dashed-btn orange-btn">Dark-Mode</button></body>