Collection of free keyboards in HTML and CSS from codepen and other resources. Update of February 2020 collection. 4 new items.

Demo image: 3D Glowing Keyboard (HTML & CSS)

Author

  • Tanya

Links

Made with

  • HTML / CSS

About a code

3D Glowing Keyboard (HTML & CSS)

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

Responsive: no

Dependencies: -

Demo image: Keyboard Layout

Author

  • Raj Suhail

Links

Made with

  • HTML / CSS

About a code

Keyboard Layout

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

Responsive: no

Dependencies: -

Demo image: Mechanical Keyboard

Author

  • MikeEsto

Links

Made with

  • HTML / CSS / JS

About a code

Mechanical Keyboard

Mechanical keyboard created with CSS.

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

Responsive: no

Dependencies: feather.js

Demo image: CSS-Only Mac Keyboard

Author

  • Nour Saud

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

CSS-Only Mac Keyboard

A simple Mac keyboard using Haml and Sass.

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

Responsive: no

Dependencies: -

Demo image: Awesome Keyboard

Author

  • Mustafa Omar

Links

Made with

  • HTML / CSS

About a code

Awesome Keyboard

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

Responsive: no

Dependencies: -

Demo image: CSS: Keyboard

Author

  • Jake Albaugh

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS: Keyboard

A functional keyboard using CSS.

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

Responsive: no

Dependencies: -

Demo image: Mobile Keyboard

Author

  • kulpreets

Links

Made with

  • HTML / CSS

About a code

Mobile Keyboard

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

Responsive: no

Dependencies: -

Demo image: CSS Flexbox Apple Keyboard

Author

  • Olex

Links

Made with

  • HTML / CSS (Less)

About a code

CSS Flexbox Apple Keyboard

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

Responsive: yes

Dependencies: -

Demo image: HTML And CSS Keyboard

Author

  • Attila Hajzer

Links

Made with

  • HTML / CSS

About a code

HTML And CSS Keyboard

A small keyboard in HTML and CSS.

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

Responsive: no

Dependencies: -

Demo image: Apple Keyboard In HTML/CSS

Author

  • Carl Calderon

Links

Made with

  • HTML / CSS

About a code

Apple Keyboard In HTML/CSS

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

Responsive: no

Dependencies: -

Demo image: Apple Wireless Keyboard With CSS3

Author

  • Dustin Cartwright

Links

Made with

  • HTML / CSS

About a code

Apple Wireless Keyboard With CSS3

Apple's wireless keyboard built entirely using CSS3.

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

Responsive: no

Dependencies: -