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
<kbd>Ctrl</kbd>
Ctrl
<kbd class="oft-kbd-sd">Ctrl</kbd>
Ctrl
<kbd class="oft-kbd-md">Ctrl</kbd>
Ctrl
<kbd class="oft-kbd-lg">Ctrl</kbd>
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:
kbd {
	font-family: 'Inconsolata', monospace;
}
In this example we use the Inconsolata are available on Google Font, which previously would have been called with:
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>


Tags :  
CSS
  


Autodidact passionate about the web, I'm always looking for new challenges.
Founder of Online-Free-Tools.com.



  Comments


No comment

Add a comment




 FR     EN  

Copyright 2024 -   Contact us - 2024-11-10 04:25:44