{"id":18051897,"url":"https://github.com/shhdharmen/keyboard-css","last_synced_at":"2025-09-07T20:15:00.790Z","repository":{"id":56542348,"uuid":"307981580","full_name":"shhdharmen/keyboard-css","owner":"shhdharmen","description":"Show off your keyboard shortcuts with style 🦄.","archived":false,"fork":false,"pushed_at":"2025-04-28T05:19:29.000Z","size":1090,"stargazers_count":98,"open_issues_count":7,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-08-18T14:37:50.876Z","etag":null,"topics":["css","kbd","keyboard","sass","scss"],"latest_commit_sha":null,"homepage":"https://shhdharmen.github.io/keyboard-css/","language":"HTML","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/shhdharmen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"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":["paypal.me/shhdharmen","https://www.buymeacoffee.com/shhdharmen"]}},"created_at":"2020-10-28T10:32:19.000Z","updated_at":"2025-06-25T07:16:27.000Z","dependencies_parsed_at":"2022-08-15T20:40:22.032Z","dependency_job_id":null,"html_url":"https://github.com/shhdharmen/keyboard-css","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/shhdharmen/keyboard-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fkeyboard-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fkeyboard-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fkeyboard-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fkeyboard-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shhdharmen","download_url":"https://codeload.github.com/shhdharmen/keyboard-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shhdharmen%2Fkeyboard-css/sbom","scorecard":{"id":818103,"data":{"date":"2025-08-11","repo":{"name":"github.com/shhdharmen/keyboard-css","commit":"3bac0b78261e5779ab10b037155c32ad9c6569f5"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.9,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","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":"Code-Review","score":0,"reason":"Found 0/23 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":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/release.yml:1","Info: no jobLevel write permissions found"],"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":"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":"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":"Pinned-Dependencies","score":3,"reason":"dependency not pinned by hash detected -- score normalized to 3","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/shhdharmen/keyboard-css/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/shhdharmen/keyboard-css/release.yml/main?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   1 out of   1 npmCommand dependencies pinned"],"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":"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":"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":"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":"Packaging","score":10,"reason":"packaging workflow detected","details":["Info: Project packages its releases by way of GitHub Actions.: .github/workflows/release.yml:12"],"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":"Signed-Releases","score":0,"reason":"Project has not signed or included provenance with any releases.","details":["Warn: release artifact v1.2.4 not signed: https://api.github.com/repos/shhdharmen/keyboard-css/releases/33326186","Warn: release artifact v1.2.4-beta.1 not signed: https://api.github.com/repos/shhdharmen/keyboard-css/releases/33325863","Warn: release artifact v1.2.3 not signed: https://api.github.com/repos/shhdharmen/keyboard-css/releases/33324319","Warn: release artifact v1.2.2 not signed: https://api.github.com/repos/shhdharmen/keyboard-css/releases/33319109","Warn: release artifact v1.2.1 not signed: https://api.github.com/repos/shhdharmen/keyboard-css/releases/33318961","Warn: release artifact v1.2.4 does not have provenance: https://api.github.com/repos/shhdharmen/keyboard-css/releases/33326186","Warn: release artifact v1.2.4-beta.1 does not have provenance: https://api.github.com/repos/shhdharmen/keyboard-css/releases/33325863","Warn: release artifact v1.2.3 does not have provenance: https://api.github.com/repos/shhdharmen/keyboard-css/releases/33324319","Warn: release artifact v1.2.2 does not have provenance: https://api.github.com/repos/shhdharmen/keyboard-css/releases/33319109","Warn: release artifact v1.2.1 does not have provenance: https://api.github.com/repos/shhdharmen/keyboard-css/releases/33318961"],"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"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"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"115 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99","Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x","Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-897m-rjf5-jp39","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-r7jx-5m6m-cpg9","Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m","Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c","Warn: Project is vulnerable to: GHSA-4r62-v4vq-hr96","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv","Warn: Project is vulnerable to: GHSA-px4h-xg32-q955","Warn: Project is vulnerable to: GHSA-pw54-mh39-w3hc","Warn: Project is vulnerable to: GHSA-xgh6-85xh-479p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4","Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653","Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj","Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67","Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w","Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2","Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v","Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8","Warn: Project is vulnerable to: GHSA-r2j6-p67h-q639","Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3","Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj","Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4","Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq","Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5","Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T14:41:30.995Z","repository_id":56542348,"created_at":"2025-08-23T14:41:30.995Z","updated_at":"2025-08-23T14:41:30.995Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274088635,"owners_count":25220261,"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-09-07T02:00:09.463Z","response_time":67,"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":["css","kbd","keyboard","sass","scss"],"created_at":"2024-10-30T22:57:41.864Z","updated_at":"2025-09-07T20:15:00.759Z","avatar_url":"https://github.com/shhdharmen.png","language":"HTML","readme":"\u003c!-- markdownlint-disable --\u003e\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/shhdharmen/keyboard-css/main/src/copy/assets/logo.png\" alt=\"Keyboard CSS Logo\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ci\u003eShow off your keyboard shortcuts with style 🦄.\u003c/i\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/shhdharmen/keyboard-css/main/src/copy/assets/demo.gif\" alt=\"Keyboard CSS Demo\"\u003e\n\u003c/p\u003e\n\u003c!-- markdownlint-restore --\u003e\n\n# Keyboard CSS \u003c!-- omit in toc --\u003e\n\nKeyboard CSS is a library of ready-to-use, cross-browser compatible keyboard like button UI for use in your web projects. Great for showing off your keyboard shortcuts.\n\n[![npm](https://img.shields.io/npm/v/keyboard-css?style=flat-square)](https://www.npmjs.com/package/keyboard-css)\n[![GitHub license](https://img.shields.io/github/license/shhdharmen/keyboard-css?style=flat-square)](https://github.com/shhdharmen/keyboard-css/blob/main/LICENSE)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\n## Table of Contents \u003c!-- omit in toc --\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Basic Usage](#basic-usage)\n    - [Usage with `kbd`](#usage-with-kbd)\n    - [Usage with `button` and `a`](#usage-with-button-and-a)\n  - [Remove Surface Border](#remove-surface-border)\n  - [Sizing](#sizing)\n  - [States](#states)\n  - [Colors](#colors)\n- [Usage with Javascript](#usage-with-javascript)\n- [Advanced Configuration Options with SASS](#advanced-configuration-options-with-sass)\n  - [Variables file](#variables-file)\n  - [Change font size](#change-font-size)\n  - [Add new size](#add-new-size)\n  - [Change depth](#change-depth)\n- [License and Contributing](#license-and-contributing)\n  - [Contributing](#contributing)\n  - [Code of Conduct](#code-of-conduct)\n- [Contributors ✨](#contributors-)\n\n## Installation\n\nAdd it directly to your webpage using a `link` tag, thanks to \u003chttps://unpkg.com\u003e:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/keyboard-css@1.2.4/dist/css/main.min.css\" /\u003e\n```\n\nor install it with npm:\n\n```bash\nnpm i keyboard-css\n```\n\nwith yarn:\n\n```bash\nyarn add keyboard-css\n```\n\n## Usage\n\nAccording to [W3C](https://www.w3.org/TR/2011/WD-html5-author-20110809/the-kbd-element.html), the `kbd` element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).\n\nThe main purpose of Keyboard CSS is to enhance look and feel such `kbd` elements, but it can also be used with `button` and `a` elements, for better interactivity (like simulating click).\n\n### Basic Usage\n\nYou just have to add a single class to `kbd`, `button` or `a` to apply the related styles, i.e. **`kbc-button`**\n\n#### Usage with `kbd`\n\nWhen `.kbc-button` is used with `kbd` element, font-size and line-height is inherited from parent for better accessibility.\n\n```html\n\u003ch3\u003ePress \u003ckbd class=\"kbc-button\"\u003e/\u003c/kbd\u003e to search this site.\u003c/h3\u003e\n\u003cp\u003ePress \u003ckbd class=\"kbc-button\"\u003eCtrl\u003c/kbd\u003e + \u003ckbd class=\"kbc-button\"\u003eShift\u003c/kbd\u003e + \u003ckbd class=\"kbc-button\"\u003eR\u003c/kbd\u003e to re-render this page.\u003c/p\u003e\n```\n\n![kbd](https://cdn.hashnode.com/res/hashnode/image/upload/v1604225546161/lUeN3BJzF.png)\n\n#### Usage with `button` and `a`\n\nWhen used with button and a elements, it starts supporting interactions.\n\n```html\n\u003cbutton class=\"kbc-button\"\u003eK\u003c/button\u003e\n\u003ca class=\"kbc-button\"\u003eK\u003c/a\u003e\n```\n\n![.kbc-button](https://cdn.hashnode.com/res/hashnode/image/upload/v1604125963109/kn4Fi5C1y.png)\n\n### Remove Surface Border\n\nTo remove surface border, simply add `no-container` class.\n\n```html\n\u003ckbd class=\"kbc-button no-container\"\u003eK\u003c/kbd\u003e\n```\n\n![.kbc-button.no-container](https://cdn.hashnode.com/res/hashnode/image/upload/v1604126020814/45uX1tLO5.png)\n\n### Sizing\n\nTotal 5 sizes are available. You can add respective class to see the effect.\n\n\u003e Sizing works with `button` and `a` elements, and not `kbd` element.\n\n| Size              | Use case                                    | Class             |\n| ----------------- | ------------------------------------------- | ----------------- |\n| Extra-extra Small | In inputs, like searchbox                   | `.kbc-button-xxs` |\n| Extra Small       | In links, like footer or credit             | `.kbc-button-xs`  |\n| Small             | Same as above, but for more prominent cases | `.kbc-button-sm`  |\n| Large             | In banners or jumbotrons                    | `.kbc-button-lg`  |\n\n```html\n\u003cbutton class=\"kbc-button kbc-button-xxs\"\u003eXXS\u003c/button\u003e\n\u003cbutton class=\"kbc-button kbc-button-xs\"\u003eXS\u003c/button\u003e\n\u003cbutton class=\"kbc-button kbc-button-sm\"\u003eSM\u003c/button\u003e\n\u003cbutton class=\"kbc-button\"\u003eMD\u003c/button\u003e\n\u003cbutton class=\"kbc-button kbc-button-lg\"\u003eLG\u003c/button\u003e\n```\n\n![kbc-button sizes](https://cdn.hashnode.com/res/hashnode/image/upload/v1604132299890/8IjYhtfAf.png)\n\n### States\n\n\u003e States work with `button` and `a` elements, and not `kbd` element.\n\nLike all buttons, this also have 4 states: `:hover`, `:focus`, `:active`, and `:disabled`. You can add classes with same state name to see it statically.\n\n```html\n\u003cbutton class=\"kbc-button hover\"\u003eHovered\u003c/button\u003e\n\u003cbutton class=\"kbc-button focus\"\u003eFocused\u003c/button\u003e\n\u003cbutton class=\"kbc-button active\"\u003eActivated\u003c/button\u003e\n\u003cbutton class=\"kbc-button disabled\"\u003eDisabled\u003c/button\u003e\n```\n\n![.kbc-button states](https://cdn.hashnode.com/res/hashnode/image/upload/v1604132353928/DdPzXHfOz.png)\n\n### Colors\n\nColors are inspired from [Bootstrap theme colors](https://getbootstrap.com/docs/4.5/getting-started/theming/#theme-colors).\n\n```html\n\u003ckbd class=\"kbc-button\"\u003eDefault\u003c/kbd\u003e\n\u003ckbd class=\"kbc-button kbc-button-primary\"\u003ePrimary\u003c/kbd\u003e\n\u003ckbd class=\"kbc-button kbc-button-secondary\"\u003eSecondary\u003c/kbd\u003e\n\u003ckbd class=\"kbc-button kbc-button-success\"\u003eSuccess\u003c/kbd\u003e\n\u003ckbd class=\"kbc-button kbc-button-danger\"\u003eDanger\u003c/kbd\u003e\n\u003ckbd class=\"kbc-button kbc-button-info\"\u003eInfo\u003c/kbd\u003e\n\u003ckbd class=\"kbc-button kbc-button-light\"\u003eLight\u003c/kbd\u003e\n\u003ckbd class=\"kbc-button kbc-button-dark\"\u003eDark\u003c/kbd\u003e\n```\n\n![.kbc-button colors](https://cdn.hashnode.com/res/hashnode/image/upload/v1604132409394/Wx4yypH83.png)\n\n## Usage with Javascript\n\nYou can do a whole bunch of other stuff with Keyboard CSS when you combine it with Javascript. A simple example:\n\n```javascript\nconst element = document.querySelector('.my-element');\nelement.classList.add('kbc-button', 'kbc-button-dark');\n```\n\nYou can also bind keyboard events:\n\n```html\n\u003cbutton class=\"kbc-button\" data-keyboard-key=\"K\"\u003eK\u003c/button\u003e\n```\n\n```javascript\ndocument.addEventListener('keydown', (ev) =\u003e {\n    const key = ev.key;\n    const element = document.querySelector(\n        '[data-keyboard-key=\"' + key.toUpperCase() + '\"]'\n    );\n    element.classList.add('active');\n});\n\ndocument.addEventListener('keyup', (ev) =\u003e {\n    const key = ev.key;\n    const element = document.querySelector(\n        '[data-keyboard-key=\"' + key.toUpperCase() + '\"]'\n    );\n    element.classList.remove('active');\n});\n```\n\n## Advanced Configuration Options with SASS\n\nI have used [sass](https://sass-lang.com/) to create this build. Mostly, everything is handled through [sass variables](https://sass-lang.com/documentation/variables), so you can easily override the defaults, thanks to [!default](https://sass-lang.com/documentation/variables#default-values) flag.\n\n### Variables file\n\nYou can check all the variables at [_variables.scss](https://github.com/shhdharmen/keyboard-css/blob/main/src/scss/abstracts/_variables.scss) file.\n\n### Change font size\n\nTo change the default base font-size of `button` and `a` elements, to 20px, you can do like below:\n\n```scss\n// assuming you have already done: npm i keyboard-css\n\n// define variables first\n$kbc-font-size-base: 20 / 16 * 1rem;\n\n// and then import\n@import \"path/to/node_modules/keyboard-css/dist/scss/main\";\n```\n\nor with new [@use](https://sass-lang.com/documentation/at-rules/use) rule, you can achieve the same using below code:\n\n```scss\n// assuming you have already done: npm i keyboard-css\n\n@use \"path/to/node_modules/keyboard-css/dist/scss/main\" with (\n    $kbc-font-size-base: 20 / 16 * 1rem\n);\n```\n\n### Add new size\n\nYou can also introduce your new size:\n\n```scss\n// add size in $kbc-btn-size-map\n$kbc-btn-size-map: (\n  \"xl\": (\n    \"padding-y\": 0.75rem,\n    \"padding-x\": 1.25rem,\n    \"font-size\": 1.5rem,\n    \"line-height\": 1.5,\n    \"depth\": 11,\n    \"after-border-width\": 0.125rem,\n    \"after-adjust-x\": -0.125rem,\n    \"after-adjust-y\": -5,\n    \"after-border-radius\": 0.5rem,\n  ),\n);\n\n// and then import\n@import \"path/to/node_modules/keyboard-css/dist/scss/main\";\n```\n\nAnd then use it in HTML:\n\n```html\n\u003cbutton class=\"kbc-button kbc-button-xl\"\u003eXL Button\u003c/button\u003e\n```\n\n### Change depth\n\nDepth is calculated and applied as multiple shadows. To increase/decrease it, you can change respective variables:\n\n```scss\n$kbc-kbd-depth: 4;\n\n// and then import\n@import \"path/to/node_modules/keyboard-css/dist/scss/main\";\n```\n\n## License and Contributing\n\nKeyboard CSS is licensed under the [MIT](https://github.com/shhdharmen/keyboard-css/blob/main/LICENSE) license.\n\n### Contributing\n\n🙏 I would ❤️ for you to contribute to Keyboard CSS and help make it even better than it is today! Checkout [contributing](https://github.com/shhdharmen/keyboard-css/blob/main/CONTRIBUTING.md) guidelines for more details.\n\n### Code of Conduct\n\nThis project and everyone participating in it are governed by the [Contributor Covenant Code of Conduct](https://github.com/shhdharmen/keyboard-css/blob/main/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to \u003cshhdharmen@gmail.com\u003e.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/shhdharmen\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/6831283?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDharmen Shah\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Dharmen Shah/keyboard-css/commits?author=shhdharmen\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#content-shhdharmen\" title=\"Content\"\u003e🖋\u003c/a\u003e \u003ca href=\"#design-shhdharmen\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/Dharmen Shah/keyboard-css/commits?author=shhdharmen\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-shhdharmen\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","funding_links":["paypal.me/shhdharmen","https://www.buymeacoffee.com/shhdharmen"],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshhdharmen%2Fkeyboard-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshhdharmen%2Fkeyboard-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshhdharmen%2Fkeyboard-css/lists"}