Need help with sbuttons?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

sButtons
316 Stars 544 Forks MIT License 3.7K Commits 6 Opened issues

Description

:bulb: Simple buttons you can use easily for your next project.

Services available

!
?

Need anything else?

Contributors list

sButtons

Logo made by Harshit Sharma

GitHub license CodeQL npm version PRs Welcome Open Source Love svg1 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> All Contributors <!-- ALL-CONTRIBUTORS-BADGE:END -->

:bulb: Simple buttons you can use easily for your next project.

Contents

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

 tags, as shown below.

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.


In case of using buttons that have icons in them, make sure to include font awesome's CDN in the

 tag.

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 Using in LESS file found in

src/sbuttons.Using in LESS
:
@import "~sbuttons/src/sbuttons.Using in LESS";

Modify Colors

To modify button colors,

import src/_variables.Using in LESS
in your Using in 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.Using in 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

 or 
tags.
Button

You can find all classes mentioned in our Examples page.

Block Buttons

To use sButtons with block display, add the class to either

 or 
.
Button

Disabled Buttons

To make a

 or 
tag disabled, add
disabled-btn
class as shown below.
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.

Icon Positioned to The Left

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

  Read

Icon Positioned to The Right

Adding the

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

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:

Toggle Button as Radio Buttons

Adding the

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

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%).
Rounded button 

Animated Buttons

To use Animated sButtons in your project, add the classes of the animated sButton you want to either

 or 
tags.
Animated 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

Dark-Mode

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.
Dark-Mode

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.