Customizable Creative Buttons For The Web – sbuttons

Preview:

Description:

sbuttons is a CSS library to create simple, customizable, creative buttons for web buttons, CTA buttons, social sharing buttons, and anything you can imagine.

Features:

• Easy to customize via LESS.
• 17+ button styles such as Rounded, Disabled, Dotted, etc.
• 8 pre-built themes like Neumorphic, Windows 95, Handdrawn, etc.
• Allows to insert custom icons to buttons.
• 30+ cool animations.

See Also:

• 50 Attractive Buttons In Pure HTML/CSS
• Animated Retro Button & Frame In Pure CSS – Buttons.css
• Dynamic Button Component In JavaScript – button.js

Basic Usage:

1. Install the sbuttons with NPM.

# NPM
$ npm i sbuttons --save

2. Import the sbuttons.min.css into the document.

<link rel="stylesheet" href="/path/to/dist/sbuttons.min.css" />

3. Create basic buttons as follows. All possible color variants:

• blue-btn
• pink-btn
• red-btn
• green-btn
• yellow-btn
• orange-btn
• purple-btn
• black-btn
• white-btn

<button class="sbtn basic-btn pink-btn">
  Button
</button>

3. Create rounded buttons.

<button class="sbtn basic-btn pink-btn rounded-btn">
  Button
</button>

4. Create block buttons.

<button class="sbtn basic-btn pink-btn block-btn">
  Button
</button>

5. See the official website for detailed usages and complete demos.