Author: | sButtons |
---|---|
Views Total: | 164 views |
Official Page: | Go to website |
Last Update: | November 2, 2020 |
License: | MIT |
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.