Logo made by Harshit Sharma
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.
<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.
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 tag.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
You can install sButtons using NPM:
npm i sbuttons
You can import the CSS file found in dist/sbuttons.css or dist/sbuttons.min.css:
@import url("~sbuttons/dist/sbuttons.min.css");
You can also import the less file found in src/sbuttons.less:
@import "~sbuttons/src/sbuttons.less";
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.
To use sButtons in your project, just add the classes of sButton you want to either or tags.
<button class="sbtn basic-btn blue-btn">Buttonbutton>
You can find all classes mentioned in our Examples page.
To use sButtons with block display, add the class to either or .
<button class="sbtn basic-btn blue-btn block-btn">Buttonbutton>
To make a or tag disabled, add disabled-btn class as shown below.
<button class="sbtn basic-btn blue-btn disabled-btn">Buttonbutton>
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.
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>
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>
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>
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.
Adding the toggle-btn class to your checkbox inputs converts them to toggle buttons. For example:
<input type="checkbox" class="sbtn toggle-btn" />
Adding the toggle-btn class to your radio inputs converts them to toggle buttons.
<input type="radio" class="sbtn toggle-btn" />
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>
To use Animated sButtons in your project, add the classes of the animated sButton you want to either or tags.
<button class="animated sbtn atom-btn blue-btn">Animated Buttonbutton>
Note: Depending on your button, the animation should either run infinitely or just once.
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.
<button class="sbtn dashed-btn black-btn dark-mode">Dark-Modebutton>
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-Modebutton> 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.
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!
If you would like to suggest a new button idea, please create a new discussion with the category "idea".
If your project uses sButtons, please submit it here to be added to the list of the websites using it!
Check out our awesome contributors here!
First-time contributors are welcome! Add new button styles that you find helpful.
Currently, there are the following button style types:
Either add something under those types or create new ones. You can check the current ones on the website. For some help on how to add or change button styles, you can learn more on the contributing guide
To check for new ideas added by contributors to implement, check the button-idea label and the ideas in discussions.
To submit a new button idea, please create a new discussion under the ideas category.
help wanted good first issue Always Open up-for-grabs buttons stale-issueMost animated button's animation only happens on hover, we need to add an animated class that triggers the animation without hovering over the button. And when the animation class is added make sure that the animation is not also triggered on hover. In order to avoid repeated code in the buttons, please move the animation or transition to a mixin and call it where it is needed.
Also, some button's animation needs to be continuous, others don't. I have indicated below which is continuous and which isn't
This issue is going to be split between contributors. Each contributor can take up a button from the list below. Please comment before taking up a button, choosing which between you will be working on.
The following buttons need the animated class:
As everyone knows, Hacktoberfest will start soon. This issue will be open to discussing any ideas to help contributors contribute and participate in Hacktoberfest!
Always Open Priority: Low Discussion stale-issueWe need to add support for dark mode, as a lot of the buttons need better support for dark mode, not just for our website, but for the users as well.
This issue will be divided between contributors where each contributor can take up a button to add dark mode support to it.
Adding the dark mode support need to be done in the following way:
[data-theme="dark"]dark-modeSo, for each button when adding the support for dark mode, you need to apply it to the above 2. For help on it you can refer to hatch button's code as it adds support for them (except adding the dark-mode class)
The following buttons need support. Please comment below to take up a button:
dark-mode class so that needs to be added). Taken by @farhanfajarrIn the Examples and documentation pages, we should add a search bar that allows us to search through the sidebar items. The search bar should be a reusable component that would allow us to use it in any sidebar.
The search bar doesn't need to do anything fancy. Just search through the sidebar items and hide/show the items based on the search term.
enhancement help wanted good first issue up-for-grabs website Priority: Medium1 - Describe the bug The sidebar list overlays footer when scrolling to the bottom of the page. 2 - Expected behavior of what should have happened (if applicable)
3 - Screenshots (if applicable)
4 - Additional notes
bug Priority: High websiteOn mobile devices (specifically iPhone), when clicking on buttons of type "Fill" the overlayed color doesn't fully fill the container button.
bug help wanted good first issue buttons Priority: Medium Discussion Hacktoberfest Cannot ReproduceIssue: #549
I've added the base-icon-btn class and how to use-it guide in the README file and on the website. Kindly review it.
Below are some of the screenshots I took while testing the button.
With text
without text
Kindly review it, thanks
Add login buttons for different social platforms. It can be for instagram, github, linkedin, or any other social media platform.
You don't have to add all types you can add as many as you want.
Please make sure to utilize the social platform's main color when making the button. You can see current buttons on the website for examples. As for the icons in the button, you can find them on font awesome.
Add new buttons under src/components/social/ and name it _<social_platform_name>.less and import it in src/components/_social.less
If you search "sButtons" now, you'll see that the website has the description "You need to enable JavaScript to run this app." We need to replace this with good description.
You'll probably need to use something like react-snap
enhancement help wanted good first issue up-for-grabs website Priority: MediumWe need to add a page for projects that use sButtons and link to them. So, if anyone is using this project or is considering using it, please link it below this issue to be added on the list of projects that are using sButtons. This would be great to provide others an example of what using sButtons will look like in their projects.
enhancement help wanted good first issue Always Open up-for-grabs Priority: MediumAdd 2 or 3 GIFs to README showcasing the buttons.
Originally posted by reev-create June 27, 2022 It would be great and attractive to see some screenshots or previews of the buttons designs in the Readme file
Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np
Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi
Django execute code This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do
BestBuy Bot — Open Source GPU/PS5/Xbox Bot I took bits from best open and closed sourced bots and made this simple bot. Please star my repo if this co
To-do-list The porpuse for this project is show You, the way how to implement webpack in a project creating a To-Do list in for add a template to crea
To Do list - minimalist It is a simple yet powerful to do list app in which you can add daily to-do tasks. it would save all the data and changes in l
rebrandly-express Seamlessly connect your web server to Rebrandly so that you can re-use your domain name for both your app and your short links Rebra
To Do list To do project is webpack project that list activities someone can do at a specific time In this TO-DO list, you can add or remove you activ
Create your Profile README using the best Templates tomper-readmify.herokuapp.com This is the frontend + backend of TomperReadmify build with MERN sta
To-Do List A simple web application of a to do list Built With HTML, CSS, JS, ES6 & Webpack Getting Started In this repository I created To-Do List SP
This package creates embeds and buttons in a very simple way using the whatsapp-web.js module for whatsapp
Gitpodify A simple portal to generate "open in Gitpod" links Contributing There is a list of suggested repositories in app/routes/index.tsx. Feel free
file-dropzone A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds file
Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np
To DO list Is a website to manage daily tasks Built With HTML,CSS,JS webpack Live Demo (if available) Live Demo Link Getting Started This is an exampl
WebDriverIO tests in Docker Running WebdriverIO tests in a docker container allows you to easily add tests to your CI. About This project uses the aut
TimezZ With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy. Features Typescript support Support all en
?? Premium - ?? Builder - ?? Features Authors GhostyXD#0202 Rundeun#1337 Contributors Florin#5231 Kokto#3333 bbystealer The new modern discord token g
About A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YML
4 May 3, 2022
14 Jan 3, 2023
5 Nov 12, 2022
585 Dec 31, 2022
10 Nov 18, 2022
5 Oct 9, 2022
3 Dec 13, 2022
5 Jul 21, 2022
15 Jan 2, 2023
12 Apr 11, 2022
17 Jan 3, 2023
4 Nov 7, 2022
1 May 31, 2021
2 Dec 25, 2021
6 Oct 22, 2022
6 Dec 3, 2022
37 Dec 5, 2022
4 Mar 16, 2023
5 Dec 28, 2022