CSS Keyboard Shorcuts
Snippets - 05/08/2015
This CSS library will help you to display keyboard shortcuts. It is light and fast to run.
Demonstration
Ctrl + Alt + Delete
Associate Code
<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>
Integrate the library into your website
The use of the library has been simplified to the maximum. Simply integrate the library on your website.
Solution 1: Quick and easy, simply add the link to our CDN
<link rel="stylesheet" href="https://cdn.online-free-tools.com/css/oft-kbd.min.css" type="text/css" />
Solution 2: Download the library and call on your site
Simply add this line and set the path to the css file. It is best to add it after calls to other CSS file. This will save the settings to be overwritten.
<link rel="stylesheet" href="/css/oft_kbd.min.css" type="text/css" />
Change the display size of the keys
You can change the size of the buttons by applying the class kbd-sd kbd-md and kbd-Ig.
| Ctrl | |
| Ctrl | |
| Ctrl | |
| Ctrl | |
Use a different font
If you want to use a particular font, simply put this CSS code after the call to the library (or directly to the end of the CSS file) and customize the font name:
If you want to use a particular font, simply put this CSS code after the call to the library (or directly to the end of the CSS file) and customize the font name:
kbd {
font-family: 'Inconsolata', monospace;
}
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
Pierrick CUSSET
Autodidact passionate about the web, I'm always looking for new challenges.
Founder of Online-Free-Tools.com.
Comments
No comment
FR
EN