Giter Site home page Giter Site logo

chelsi-001011 / sbuttons Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sbuttons/sbuttons

0.0 0.0 0.0 3.93 MB

:bulb: Simple buttons you can use easily for your next project.

Home Page: https://sbuttons.github.io/sbuttons/

License: MIT License

HTML 21.64% CSS 10.24% JavaScript 23.56% Less 44.56%

sbuttons's Introduction

sButtons

Logo made by Harshit Sharma

GitHub license PRs Welcome Open Source Love svg1 All Contributors

๐Ÿ’ก Simple buttons you can use easily for your next project.

Participate in Hacktoberfest!

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

Contents

Installation

Download CSS File

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">

CDN

You can use the CDN:

<link rel="stylesheet" href="https://cdn.statically.io/gh/sButtons/sbuttons/c135f5f7/dist/sbuttons.min.css">

NPM

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.

Modifying Button Colors

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.

Usage

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.

Block Buttons

To use sButtons with block display, add the class to either <button> or <a> tags

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

Disabled Buttons

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>

Icon Buttons

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">

Contribution

Please see the contributing guidelines for details.

Button ideas

If you would like to suggest a new button idea, please create a "New Button Idea" Issue.

Contributors

Check out our awesome contributors here!

LICENSE

MIT

sbuttons's People

Contributors

adsingh14 avatar alkatrivedi avatar allcontributors[bot] avatar anonyda avatar apoorvakadam avatar archis19 avatar balaguru4580 avatar baspalinckx avatar caseycling avatar chaitanya4vedi avatar charu271 avatar dsnehasish74 avatar esakki-selvaraj avatar goodiec avatar hades-01 avatar heinkhantzaw avatar hvirmani avatar icoderharshit avatar isonnymichael avatar jlambertazzo avatar kamilkoselnik avatar lee00286 avatar malihanan avatar mayankmohak avatar neeraj15022001 avatar ruchikamuddinagiri avatar shahednasser avatar shubhampandey-engineer avatar zilyukina avatar zuhdannur avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.