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.

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
  • Only Icon
  • Icon Positioned to The Left
  • Icon Positioned to The Right
  • Toggle Button
  • Toggle Button as Checkboxes
  • Toggle Button as Radio Button
  • Rounded Buttons
  • Animated Buttons
    
  • Dark Mode
  • Using dark-mode Class
  • Using data-theme attribute
• Contribution
  • Button ideas
  • Projects Using sButtons
• Contributors
• LICENSE

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

Make sure to replace

"/path/to/sbuttons.min.css"

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

NPM

You can install sButtons using NPM:

npm i sbuttons

Using in CSS

You can import the CSS file found in

dist/sbuttons.css

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

@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

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

Disabled Buttons

To make a

disabled-btn

Button

Icon Buttons

The

base-icon-btn

Only Icon

The

icon-btn

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

  Read

Toggle Button

The

toggle-btn

toggle-off-btn

toggle-on-btn

Toggle Button as Checkboxes

Adding the

toggle-btn

Toggle Button as Radio Buttons

Adding the

toggle-btn

Rounded buttons

To add the rounded buttons with a particular radius, you can use various classes like

rounded-x-btn

5

fully rounded

Rounded button 

Animated Buttons

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

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"

  Dark-Mode

Note:

data-theme="dark"

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