Get Started with sButtons

Download CSS File

You can download the (CSS file)(https://raw.githubusercontent.com/sButtons/sbuttons/master/dist/sbuttons.min.css) 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 sbuttons

Using in CSS

You can import the CSS file found in dist/sbuttons.css or dist/sbuttons.min.css:

@import url("~sbuttons/dist/sbuttons.min.css");

Using in LESS

You can also import the less file found in src/sbuttons.less:

@import "~sbuttons/src/sbuttons.less";

Modify 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.

Usage

Basic Button

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>

You can find all classes mentioned in our Examples page.

Block Buttons

To use sButtons with block display, add the class to either <button> or <a>.

<button class="sbtn basic-btn blue-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>

Icon Buttons

The base-icon-btn class enables you to have a normal, customizable icon 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.

Only Icon

The icon-btn class alone gives you a default button with no background color and border.

<button class="sbtn icon-btn"><i class="fas fa-book"></i></button>

Icon Positioned to The Left

Adding the icon-left class to a button makes the icon positioned to the left.

<button class="sbtn base-icon-btn icon-left orange-btn">
  <i class="fas fa-book"></i>Read
</button>

Icon Positioned to The Right

Adding the icon-right class to a button makes the icon positioned to the right.

<button class="sbtn base-icon-btn icon-right orange-btn">
  Read<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 Buttons

Adding the toggle-btn class to your radio inputs converts them to toggle buttons.

<input type="radio" class="sbtn toggle-btn" />

Rounded buttons

To add the rounded buttons with a particular radius, you can use various classes like rounded-x-btn where x is the radius in pixels which you want. Here x ranges from 5(border-radius = 5px) to fully rounded(border-radius = 50%).

<button class="rounded-5-btn sbtn blue-btn">Rounded button </button>

Animated Buttons

To use Animated sButtons in your project, add the classes of the animated sButton you want to either <button> or <a> tags.

<button class="animated sbtn atom-btn blue-btn">Animated Button</button>

Note: Depending on your button, the animation should either run infinitely or just once.

Dark Mode

sButtons is compatible with dark mode. It either works by adding dark-mode class to buttons, or by adding data-theme="dark" to a container element.

Using dark-mode Class

<button class="sbtn dashed-btn black-btn dark-mode">Dark-Mode</button>

Using data-theme attribute

By adding data-theme="dark" to a parent element like the body or a div element, the button will automatically be in dark mode.

<div data-theme="dark">
  <button class="sbtn dashed-btn black-btn">Dark-Mode</button>
</div>

Note: data-theme="dark" attribute does not give dark mode styling to the container element, you have to do that yourself. It only toggles sButtons to be in 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!

LICENSE

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 3,825 Commits
.github		.github
.vs		.vs
dist		dist
src		src
website		website
.all-contributorsrc		.all-contributorsrc
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
CONTRIBUTORS.md		CONTRIBUTORS.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
debug.log		debug.log
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json

Uh oh!

License

sButtons/sbuttons

Folders and files

Latest commit

History

Repository files navigation

Contents

Get Started with sButtons

Download CSS File

CDN

NPM

Using in CSS

Using in LESS

Modify Colors

Usage

Basic Button

Block Buttons

Disabled Buttons

Icon Buttons

Only Icon

Icon Positioned to The Left

Icon Positioned to The Right

Toggle Button

Toggle Button as Checkboxes

Toggle Button as Radio Buttons

Rounded buttons

Animated Buttons

Dark Mode

Using dark-mode Class

Using data-theme attribute

Contribution

Button ideas

Projects Using sButtons

Contributors

LICENSE

About

Topics

Resources

License

Security policy

Uh oh!

Stars

Watchers

Forks

Sponsor this project

Uh oh!

Uh oh!

Contributors 235

Uh oh!

Languages