Logo made by Harshit Sharma
💡 Simple buttons you can use easily for your next project.
This repository will help people who don't know how to participate in Hacktoberfest or where to start contributing. We will be adding a Hacktoberfest label to help contributors find the 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.
DO NOT submit any pull request that does no fix based on an issue or an actual bug/fix, as it will be labeled invalid and will not count for your Hacktoberfest participation
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">
You can use the CDN:
<link rel="stylesheet" href="https://cdn.statically.io/gh/sButtons/sbuttons/c135f5f7/dist/sbuttons.min.css">
You can install sButtons using NPM:
npm i sbuttons
And then you can import the CSS file found in dist/sbuttons.css or the LESS file found in src/sbuttons.less.
To modify button colors, import src/sbuttons.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/sbuttons.less';
@blue: #54a2bd; /* Make it darker */
Check out sbuttons.less for the full list of variables.
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>
Same can be done for <a> tag
<a href='#' class='sbtn basic-btn blue-btn'>Button</a>
You can find all classes and their corresponding sButtons mentioned in our website.
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 disabled-btn class as shown below.
<button class="sbtn basic-btn blue-btn disabled-btn">Button</button>
<a class="sbtn basic-btn blue-btn disabled-btn">Button</a>
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">
Please see the contributing guidelines for details.
If you would like to suggest a new button idea, please create a "New Button Idea" Issue.
Check out our awesome contributors here!