Show off your keyboard shortcuts with style 🦄. Keyboard CSS Keyboard 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. Table of Contents Installation Usage Basic Usage Usage with kbd Usage with button and a Remove Surface Border Sizing States Colors Usage with Javascript Advanced Configuration Options with SASS Variables file Change font size Add new size Change depth License and Contributing Contributing Code of Conduct Contributors ✨ Installation Add it directly to your webpage using a link tag, thanks to unpkg.com: <link rel="stylesheet" href="https://unpkg.com/keyboard-css@1.2.4/dist/css/main.min.css" /> Enter fullscreen mode Exit fullscreen mode or install it with npm: npm i keyboard-css Enter fullscreen mode Exit fullscreen mode with yarn: yarn add keyboard-css Enter fullscreen mode Exit fullscreen mode Usage According to W3C, the kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as…
I created a CSS called Keyboard CSS. You can use it to showcase your keyboard shortcuts... 😊
Repo: github.com/shhdharmen/keyboard-css
NPM: npmjs.com/package/keyboard-css
Website: shhdharmen.github.io/keyboard-css/
Show off your keyboard shortcuts with style 🦄.
Show off your keyboard shortcuts with style🦄 .
Keyboard CSS
Keyboard 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.
Table of Contents
Installation
Add it directly to your webpage using a
linktag, thanks to unpkg.com:or install it with npm:
with yarn:
Usage
According to W3C, the
kbdelement represents user input (typically keyboard input, although it may also be used to represent other input, such as…