{"id":24708758,"url":"https://github.com/ruisoftware/jquery-rsbutton","last_synced_at":"2026-04-11T10:36:36.488Z","repository":{"id":14829297,"uuid":"17552080","full_name":"ruisoftware/jquery-rsButton","owner":"ruisoftware","description":"Animates UI buttons with multiple frames for realistic look","archived":false,"fork":false,"pushed_at":"2017-03-22T15:19:14.000Z","size":131,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-16T12:33:54.731Z","etag":null,"topics":["3d","animation","button","css","frame","javascript","realistic-ui","state-transitions"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ruisoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-08T22:05:24.000Z","updated_at":"2023-12-29T12:59:35.000Z","dependencies_parsed_at":"2022-09-19T23:23:06.054Z","dependency_job_id":null,"html_url":"https://github.com/ruisoftware/jquery-rsButton","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ruisoftware/jquery-rsButton","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsButton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsButton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsButton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsButton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruisoftware","download_url":"https://codeload.github.com/ruisoftware/jquery-rsButton/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsButton/sbom","scorecard":{"id":789434,"data":{"date":"2025-08-11","repo":{"name":"github.com/ruisoftware/jquery-rsButton","commit":"36f3419f27a3dce89f0f2aeb2d900fc8570009d8"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/26 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-23T07:04:00.227Z","repository_id":14829297,"created_at":"2025-08-23T07:04:00.227Z","updated_at":"2025-08-23T07:04:00.227Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279003403,"owners_count":26083581,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["3d","animation","button","css","frame","javascript","realistic-ui","state-transitions"],"created_at":"2025-01-27T06:47:25.282Z","updated_at":"2025-10-10T09:47:46.425Z","avatar_url":"https://github.com/ruisoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-rsButton [![Build Status](https://travis-ci.org/ruisoftware/jquery-rsButton.svg?branch=master)](https://travis-ci.org/ruisoftware/jquery-rsButton)\r\nAnimates a toggle control (most commonly a button) with several frames for a realistic state transition look.\r\n\r\nEvery toggle control has two states: unpressed and pressed. When a button is clicked, the state changes from unpressed to pressed and remains pressed while its down. Once it releases, the state moves back from pressed to unpressed. This plug-in simply displays intermediate frames between these two states, through the use of CSS classes, one class for each frame.\r\n\r\nHere is an example:\r\n```html\r\n    \u003cbutton class=\"btn\"\u003esample frame\u003c/button\u003e\r\n```\r\n```javascript\r\n    $(\".btn\").rsButton({\r\n        frameClasses: ['frm1', 'frm2', 'frm3', 'frm4']\r\n    });\r\n```\r\nWhen a button is pressed, the frm1, frm2, frm3 and frm4 are displayed one after another for 60 milliseconds (you can change the frame delay).  \r\n![frames](https://cloud.githubusercontent.com/assets/428736/21605695/d6674192-d1bb-11e6-800d-227bbf6527b4.png)  \r\nNotice the subtle differences between these four frames and the changes made to the markup during this process.\r\n\r\nWhen a button is released, the frames are displayed in oposite order: frm4, frm3, frm2 and frm1.  \r\n[Live demo here](http://codepen.io/ruisoftware/pen/rjNMZJ).\r\n\r\n# Faq\r\n### I dislike the colors and style. Is it possible to change?\r\nSure it is possible to change.  \r\nFor reasons related with performance and responsive design, each frame is made out of pure CSS with relative `em` units. They are not images at all. These relative units should always be used, even if you wish to use a fixed size layout.  \r\nFor your convenience, there is a LESS file at `src/rsButton.less` where you can change the frames to your preference. If you are interested in changing only the color palette, you can change the `@background` variable in the LESS file.  \r\nHowever, nothing stops you from using images for each frame, although that might cause performance and responsive design issues later on.\r\n\r\n### Do I need to specify that `btn` class?\r\nYes, if you want a 3D layout to your buttons.  \r\nIf you prefer a flat layout, then use the class `btnflat` instead.  \r\nNotice that you are free to use whatever class you want, just make sure it is also defined in the `src/rsButton.less`.\r\n\r\n### Why my `\u003cinput class=\"btn\"\u003e` element looks flat and not 3D alike?\r\nIn the `src/rsButton.less` you can see that the 3D look is achived via the `:before` and `:after` pseudo-classes.  \r\nThese pseudo-classes cannot be applied to `input` elements, since they are not block elements, they are inline, and therefore `input` elements can only have a flat layout.\r\n\r\n### Is it limited to 4 frames?\r\nNo, you can use as many frames you wish. If you only use 1 or 2 frames, then there is no point using this plug-in, since that can be easly done with CSS alone.  \r\nYou need to make sure the frames you specify in `frameClasses` property are defined in the LESS file.\r\n\r\n### How can I compile LESS into CSS?\r\nRun \r\n```bash\r\ngrunt less\r\n```\r\nIt creates a new `dist/rsButton.css` file.\r\n\r\n### This plug-in can only be used for push buttons?\r\nNo. It can be used for any control that switches from state A to state B when pressed down and from state B to A when released.  \r\nThis means that this plug-in works for any markup, not only for `\u003cbutton\u003e`.  \r\nSince the most common control with this behaviour is a push button, hence the plug-in name.\r\n\r\n### Cannot this be done with CSS alone?\r\nIt depends...  \r\nYes, if you want to simply smooth (interpolate) frames between a start and an end frame. In this case, you should not use this plug-in and must resort to CSS transitions.  \r\nNo, if you want to design specific frames that are distinct from each other and thus not possible to replicate via CSS transitions.\r\n\r\n### Why cannot use CSS animations to specify distinct frames?\r\nYou *almost* can with CSS3 animations.  \r\nBy default, CSS3 animations perform interpolations between the animation steps. Since we don't want any frame interpolation (because we define how each frame exactly looks), we need to specify either `step-start` or `step-end` as your [timing function](https://developer.mozilla.org/ru/docs/Web/CSS/single-transition-timing-function#step-start).  \r\nYou also need two animations:\r\n- When the control is pressed down, the one that animates the state transition from unpressed to pressed. Easly implemented with the [`:active`](https://developer.mozilla.org/en-US/docs/Web/CSS/:active) pseudo-class. When this animation finishes, it needs to stay on the last frame, so [`animation-fill-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) should be set to `forwards`. The animation shows the frames frm1 -\u003e frm2 -\u003e frm3 -\u003e frm4 and stays on frm4 when animation finishes.\r\n- When the control is released, the one that animates the state transition from pressed to unpressed. This has to be triggered when not in `:active`, which means that should be the default animation. The animation shows the frames frm4 -\u003e frm3 -\u003e frm2 -\u003e frm1.\r\n```css\r\n/* frm1 style goes here */\r\n\r\n@keyframes pressAnim {\r\n    33%  { /* frm2 style goes here */ }\r\n    66%  { /* frm3 style goes here */ }\r\n    100% { /* frm4 style goes here */ }\r\n}\r\n\r\n@keyframes releaseAnim {\r\n    0%  { /* frm4 style goes here */ }\r\n    33% { /* frm3 style goes here */ }\r\n    66% { /* frm2 style goes here */ }\r\n}\r\n\r\nbutton.btn {\r\n    animation: releaseAnim .5s step-end;\r\n}\r\n\r\nbutton.btn:active {\r\n    animation: pressAnim .5s forwards step-end;\r\n}\r\n```\r\nBasically, there are three problems with this approach:\r\n- The second animation (releaseAnim) runs at page load time;\r\n- If the user presses and releases the button too quickly, before the first animation (pressAnim) finishes, an ugly \"jump\" to the second animation will be noticed. That is, considering the use case with 4 frames, if a button is pressed down and released so quickly that only the first two frames were displayed, the final chained animation will look like frm1 -\u003e frm2 -\u003e frm4 -\u003e frm3 -\u003e frm2 -\u003e frm1;\r\n- Lack of cross-browser support.\r\n\r\nDue to the above problems, a decision was made to implement this functionality in JavaScript.\r\n\r\n# Key Features\r\n - Works with any HTML element;\r\n - Desktop and mobile devices;\r\n - Optionally uses the keyboard (space or Enter);\r\n - Small footprint.\r\n\r\n# Installation\r\n\r\nYou can install from [npm](https://www.npmjs.com/):\r\n```bash\r\nnpm install jquery.rsbutton --save\r\n```\r\nor directly from git:\r\n```javascript\r\n\u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsButton/master/src/jquery.rsButton.js\"\u003e\u003c/script\u003e\r\n```\r\nor you can download the Zip archive from github, clone or fork this repository and include `jquery.rsButton.js` from your local machine.\r\n\r\nYou also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.\r\n\r\n# Usage\r\n```javascript\r\n\u003c!doctype html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n    \u003ctitle\u003ejquery-rsButton plug-in\u003c/title\u003e\r\n    \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"\u003e\u003c/script\u003e\r\n    \u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsButton/master/src/jquery.rsButton.js\"\u003e\u003c/script\u003e\r\n    \u003cscript\u003e\r\n        $(document).ready(function () {\r\n            $('.btn, .btnflat').rsButton();\r\n        });\r\n    \u003c/script\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n    \u003cbutton class=\"btn\"\u003epush me\u003c/button\u003e\r\n    \u003cbutton class=\"btnflat\"\u003epush me\u003c/button\u003e\r\n    \u003cdiv class=\"btn\"\u003epush me\u003c/div\u003e\r\n\u003cbody\u003e\r\n\u003c/html\u003e\r\n````\r\n[Live demo here](http://codepen.io/ruisoftware/pen/rjNMZJ).\r\n\r\n# License\r\nThis project is licensed under the terms of the [MIT license](https://opensource.org/licenses/mit-license.php)\r\n\r\n# Bug Reports \u0026 Feature Requests\r\nPlease use the [issue tracker](https://github.com/ruisoftware/jquery-rsButton/issues) to report any bugs or file feature requests.\r\n\r\n# Contributing\r\nPlease refer to the [Contribution page](https://github.com/ruisoftware/jquery-rsButton/blob/master/CONTRIBUTING.md) from more information.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rsbutton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruisoftware%2Fjquery-rsbutton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rsbutton/lists"}