Collection of free jQuery keyboard code examples from Codepen, Github and other resources. Update of February 2020 collection. 1 new item.
Related Articles
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Neumorphism Keyboard Interaction
A simple keyboard interaction in the Neumorphism style.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, p5.js
Links
Made with
- HTML / CSS / JS
About a code
Interactive Keyboard UI
A simple interactive keyboard made with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: bootstrap.css, font-awesome.css, jquery.js, jquery-ui.js
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Smooth Keyboard Layout On CSS Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML (Haml) / CSS (Sass) / JS (Babel)
About a code
Microsoft Keyboard
A pure HTML + SCSS Microsoft keyboard visualisation. Used jQuery to make it more dynamic and respond to physical keyboard strokes.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css, jquery.js, jquery-play-sound.js
Links
Made with
- HTML / CSS (Stylus) / JS
About a code
Morphing Keyboard
Animation for keyboard keys, morphing from lowercase to uppercase and vice versa.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML (Haml) / CSS (Sass) / JS (CoffeeScript)
About a code
Keyboard
Macbook Pro keyboard.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS (Sass) / JS (CoffeeScript)
About a code
Mac-ish Interactive Keyboard and Display
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS / JS
About a code
jQuery Keyboard
Apple German keyboard layout. Type Something...
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Happy Hacking Keyboard
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Keyboard
A keyboard. Nothing much else to it. Not functional.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js