DEV Community

loading...

Discussion on: What was your win this week?

Collapse
shhdharmen profile image
Dharmen Shah

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/

GitHub logo shhdharmen / keyboard-css

Show off your keyboard shortcuts with style 🦄.

Keyboard CSS Logo

Show off your keyboard shortcuts with style 🦄.

Keyboard CSS Demo

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.

npm GitHub license Commitizen friendly code style: prettier semantic-release

Table of Contents

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…

Forem Open with the Forem app