Collection of free jQuery keyboard code examples.


Author

  • Wouter

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

Author

  • Souleste

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

Author

  • Andrej Sharapov

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

Author

  • Kevin Falencik

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

Author

  • Lucas Bebber

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

Author

  • Tim Dikun

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

Author

  • Lennart Hase

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

Author

  • Peiwen Lu

Made with

  • HTML / CSS (Sass) / JS

About a code

Happy Hacking Keyboard

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Demo image: Keyboard

Author

  • Joe Taylor

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