💡 Simple buttons you can use easily for your next project.
Hacktoberfest is starting soon, and this repository will help people who don't know where to start contributing. We will be adding a Hacktoberfest label to help contributors find the simple issues they can contribute to. If you have any ideas for new issues or ways to help contributors participate in Hacktoberfest, please add them here.
You can download the CSS file here and then add it to your html file inbetween the <head> tags:
<link rel="stylesheet" href="/path/to/sbuttons.min.css">
Or instead of downloading the file, you can use the CDN:
<link rel="stylesheet" href="https://cdn.statically.io/gh/shahednasser/sbuttons/c135f5f7/dist/sbuttons.min.css">
In case of using buttons that have icons in them, make sure to include font awesome's CDN in the <head> tag:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
To use sButtons in your project , just add the classes of sButton you want to either <button> or <a> tags :
<button class='sbtn basic-btn blue-btn'>Button</button>
This code will produce basic sButton with blue colour. Same can be done for <a> tag
<a href='#' class='sbtn basic-btn blue-btn'>Button</a>
To use sButtons with block display, add the class to either <button> or <a> tags
<button class="sbtn basic-btn block-btn">Button</button>
To make a <button> or <a> tag disabled, add btn-disabled class as shown below.
<button class="sbtn basic-btn blue-btn btn-disabled">Button</button>
<a class="sbtn basic-btn blue-btn btn-disabled">Button</a>
You can find all classes and their corresponding sButtons mentioned in our website.
- Clone the repository
git clone https://github.com/shahednasser/sbuttons.git - Run NPM install
npm install
Please see the contributing guidelines for details.
If you have ideas for buttons, or would like to see a list of ideas that have not been implemented to work on, you can add them here.
Check out our awesome contributors here!