{"id":15011146,"url":"https://github.com/sbuttons/sbuttons","last_synced_at":"2025-10-03T20:31:51.684Z","repository":{"id":39162922,"uuid":"159349307","full_name":"sButtons/sbuttons","owner":"sButtons","description":":bulb: Simple buttons you can use easily for your next project.","archived":true,"fork":false,"pushed_at":"2022-09-28T16:51:31.000Z","size":17055,"stargazers_count":403,"open_issues_count":2,"forks_count":556,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-12-13T11:06:35.586Z","etag":null,"topics":["animation","button-animation","button-css","buttons","css","css-animation","css3","hacktoberfest","less","lesscss","stylesheet"],"latest_commit_sha":null,"homepage":"https://sbuttons.netlify.app/","language":"Less","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sButtons.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.buymeacoffee.com/shahednasser"]}},"created_at":"2018-11-27T14:36:30.000Z","updated_at":"2024-11-15T04:11:36.000Z","dependencies_parsed_at":"2022-07-14T09:22:29.324Z","dependency_job_id":null,"html_url":"https://github.com/sButtons/sbuttons","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sButtons%2Fsbuttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sButtons%2Fsbuttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sButtons%2Fsbuttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sButtons%2Fsbuttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sButtons","download_url":"https://codeload.github.com/sButtons/sbuttons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235184514,"owners_count":18949255,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","button-animation","button-css","buttons","css","css-animation","css3","hacktoberfest","less","lesscss","stylesheet"],"created_at":"2024-09-24T19:39:15.227Z","updated_at":"2025-10-03T20:31:51.232Z","avatar_url":"https://github.com/sButtons.png","language":"Less","readme":"\u003e :warning: This repository is now archived as I'm unable to maintain it moving forward. Thank you for everyone that contributed to this project!\n\n![sButtons](./website/public/images/logo-colored.png)\n\nLogo made by [Harshit Sharma](https://www.github.com/icoderharshit)\n\n\u003c!-- # sButtons --\u003e\n\n[![GitHub license](https://img.shields.io/github/license/Naereen/StrapDown.js.svg)](./LICENSE)\n[![CodeQL](https://github.com/sButtons/sbuttons/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/sButtons/sbuttons/actions/workflows/codeql-analysis.yml) [![npm version](https://badge.fury.io/js/sbuttons.svg)](https://badge.fury.io/js/sbuttons) [![](https://data.jsdelivr.com/v1/package/npm/sbuttons/badge)](https://www.jsdelivr.com/package/npm/sbuttons)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](./CONTRIBUTING.md) [![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](./CONTRIBUTING.md) \u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-259-orange.svg?style=flat-square)](./CONTRIBUTORS.md)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n:bulb: Simple buttons you can use easily for your next project.\n\n[![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/shahednasser)\n\n# Contents\n\n- [Get started with sButtons](#get-started-with-sbuttons)\n  - [Download CSS File](#download-css-file)\n  - [CDN](#cdn)\n  - [NPM](#npm)\n    - [Using in CSS](#using-in-css)\n    - [Using in LESS](#using-in-less)\n    - [Modify Colors](#modifying-button-colors)\n- [Usage](#usage)\n  - [Basic Button](#basic-button)\n  - [Block Buttons](#block-buttons)\n  - [Disabled Buttons](#disabled-buttons)\n  - [Only Icon](#only-icon)\n    - [Icon Positioned to The Left](#icon-positioned-to-the-left)\n    - [Icon Positioned to The Right](#icon-positioned-to-the-right)\n  - [Toggle Button](#toggle-button)\n    - [Toggle Button as Checkboxes](#toggle-button-as-checkboxes)\n    - [Toggle Button as Radio Button](#toggle-button-as-radio-button)\n  - [Rounded Buttons](#rounded-buttons)\n  - [Animated Buttons](#animated-buttons)  \n  - [Dark Mode](#dark-mode)\n    - [Using dark-mode Class](#using-dark-mode-class)\n    - [Using data-theme attribute](#using-data-theme-attribute)\n- [Contribution](#contribution)\n  - [Button ideas](#button-ideas)\n  - [Projects Using sButtons](#projects-using-sbuttons)\n- [Contributors](#contributors)\n- [LICENSE](#license)\n\n# Get Started with sButtons\n\n## Download CSS File\n\nYou 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.\nDownload the file and link it as a stylesheet in between your `\u003chead\u003e` tags, as shown below.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/path/to/sbuttons.min.css\" /\u003e\n```\n\nMake sure to replace `\"/path/to/sbuttons.min.css\"` with the path you stored it in.\n\n## CDN\n\nOr instead of downloading the file, you can use the CDN.\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/sbuttons/dist/sbuttons.min.css\"\n/\u003e\n```\n\nIn case of using buttons that have icons in them, make sure to include font awesome's CDN in the `\u003chead\u003e` tag.\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://use.fontawesome.com/releases/v5.14.0/css/all.css\"\n  integrity=\"sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc\"\n  crossorigin=\"anonymous\"\n/\u003e\n```\n\n## NPM\n\nYou can install sButtons using NPM:\n\n```shell\nnpm i sbuttons\n```\n\n## Using in CSS\n\nYou can import the CSS file found in `dist/sbuttons.css` or `dist/sbuttons.min.css`:\n\n```css\n@import url(\"~sbuttons/dist/sbuttons.min.css\");\n```\n\n## Using in LESS\n\nYou can also import the less file found in `src/sbuttons.less`:\n\n```css\n@import \"~sbuttons/src/sbuttons.less\";\n```\n\n## Modify Colors\n\nTo modify button colors, `import src/_variables.less` in your less file, then make changes to the variables after the import.\nFor example, to change the blue color to a different shade:\n\n```css\n@import \"/path/to/_variables.less\";\n@blue: #54a2bd; /* Make it darker */\n```\n\nCheck out [_variables.less](https://github.com/sButtons/sbuttons/blob/master/src/_variables.less) for the full list of variables.\n\n# Usage\n\n## Basic Button\n\nTo use sButtons in your project, just add the classes of sButton you want to either `\u003cbutton\u003e` or `\u003ca\u003e` tags.\n\n```html\n\u003cbutton class=\"sbtn basic-btn blue-btn\"\u003eButton\u003c/button\u003e\n```\n\nYou can find all classes mentioned in our [Examples](https://sbuttons.netlify.app/examples) page.\n\n## Block Buttons\n\nTo use sButtons with block display, add the class to either `\u003cbutton\u003e` or `\u003ca\u003e`.\n\n```html\n\u003cbutton class=\"sbtn basic-btn blue-btn block-btn\"\u003eButton\u003c/button\u003e\n```\n\n## Disabled Buttons\n\nTo make a `\u003cbutton\u003e` or `\u003ca\u003e` tag disabled, add `disabled-btn` class as shown below.\n\n```html\n\u003cbutton class=\"sbtn basic-btn blue-btn disabled-btn\"\u003eButton\u003c/button\u003e\n```\n\n## Icon Buttons\n\nThe `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.\n\n## Only Icon\n\nThe `icon-btn` class alone gives you a default button with no background color and border.\n\n```html\n\u003cbutton class=\"sbtn icon-btn\"\u003e\u003ci class=\"fas fa-book\"\u003e\u003c/i\u003e\u003c/button\u003e\n```\n\n## Icon Positioned to The Left\n\nAdding the icon-left class to a button makes the icon positioned to the left.\n\n```html\n\u003cbutton class=\"sbtn base-icon-btn icon-left orange-btn\"\u003e\n  \u003ci class=\"fas fa-book\"\u003e\u003c/i\u003eRead\n\u003c/button\u003e\n```\n\n## Icon Positioned to The Right\n\nAdding the `icon-right` class to a button makes the icon\npositioned to the right.\n\n```html\n\u003cbutton class=\"sbtn base-icon-btn icon-right orange-btn\"\u003e\n  Read\u003ci class=\"fas fa-book\"\u003e\u003c/i\u003e\n\u003c/button\u003e\n```\n\n## Toggle Button\n\nThe `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.\n\n## Toggle Button as Checkboxes\n\nAdding the `toggle-btn` class to your checkbox inputs converts them to toggle buttons.\nFor example:\n\n```html\n\u003cinput type=\"checkbox\" class=\"sbtn toggle-btn\" /\u003e\n```\n\n## Toggle Button as Radio Buttons\n\nAdding the `toggle-btn` class to your radio inputs converts them to toggle buttons.\n\n```html\n\u003cinput type=\"radio\" class=\"sbtn toggle-btn\" /\u003e\n```\n\n## Rounded buttons \nTo 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%).\n\n```html\n\u003cbutton class=\"rounded-5-btn sbtn blue-btn\"\u003eRounded button \u003c/button\u003e\n```\n\n## Animated Buttons\n\nTo use Animated sButtons in your project, add the classes of the animated sButton you want to either `\u003cbutton\u003e` or `\u003ca\u003e` tags.\n\n```html\n\u003cbutton class=\"animated sbtn atom-btn blue-btn\"\u003eAnimated Button\u003c/button\u003e\n```\nNote: Depending on your button, the animation should either run infinitely or just once. \n\n## Dark Mode\n\nsButtons 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.\n\n## Using dark-mode Class\n\n```html\n\u003cbutton class=\"sbtn dashed-btn black-btn dark-mode\"\u003eDark-Mode\u003c/button\u003e\n```\n\n## Using data-theme attribute\n\nBy adding `data-theme=\"dark\"` to a parent element like the body or a div element, the button will automatically be in dark mode.\n\n```html\n\u003cdiv data-theme=\"dark\"\u003e\n  \u003cbutton class=\"sbtn dashed-btn black-btn\"\u003eDark-Mode\u003c/button\u003e\n\u003c/div\u003e\n```\n\nNote: `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.\n\n# Contribution\n\nPlease see the [contributing guidelines](./CONTRIBUTING.md) for details.\n\nYou can also join or start [discussions](https://github.com/sButtons/sbuttons/discussions) with the community members if you have any ideas or questions!\n\n### Button ideas\n\nIf you would like to suggest a new button idea, please create a [new discussion](https://github.com/sButtons/sbuttons/discussions/new) with the category \"idea\".\n\n### Projects Using sButtons\n\nIf your project uses sButtons, please submit it [here](https://github.com/sButtons/sbuttons/issues/1255) to be added to the list of the websites using it!\n\n# Contributors\n\nCheck out our awesome contributors [here](./CONTRIBUTORS.md)!\n\n\u003c!-- # Logo\n\n Logo made by [Harshit Sharma](https://www.github.com/icoderharshit) --\u003e\n\n# LICENSE\n\n[MIT](./LICENSE)\n","funding_links":["https://www.buymeacoffee.com/shahednasser"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbuttons%2Fsbuttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsbuttons%2Fsbuttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbuttons%2Fsbuttons/lists"}