Neumorphism Keyboard Design using only HTML & CSS

Hello readers, Today in this blog you'll learn how to a Neumorphism Keyboard using only HTML & CSS. Earlier I've shared a blog on how to create a Neumorphism Social Media Buttons and now I'm going to create Neumorphism Keyboard using HTML & CSS only.

Neumorphism (aka neomorphic) is a comparatively new design trend and a term that's made a good amount of buzz lately. It's aesthetic is signalized by minimal and real-looking UI that's kind of a new take on skeuomorphism.

In this program (Neumorphism Keyboard Design), on the webpage, there is only a keyboard with a neomorphic effect. This is a pure CSS program that means this keyboard is created using only HTML & CSS for design purposes so these keyboard keys don't work that means when you click on the specific key there is only shown a neomorphic effect. If you want to display the data on a particular key press, you need to add JavaScript for that.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Neumorphism Keyboard Design).

Video Tutorial of Neumorphism Keyboard Design

In the video, you have seen the neomorphic click effect of this program (Neumorphism Keyboard) and I hope you have understood the codes behind creating this program. As you know, I used only HTML & CSS to create this keyboard so there are no vast codes to understand. If you want to display the data on key press and you don't know JavaScript, you can comment down I'll do for you in the next blog.

If you like this program (Neumorphism Keyboard Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Neumorphism Keyboard Design [Source Codes]

To create this program (Neumorphism Keyboard Design). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Custom Keyboard Design | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="keys">
          <input type="button" value="Q">
          <input type="button" value="W">
          <input type="button" value="E">
          <input type="button" value="R">
          <input type="button" value="T">
          <input type="button" value="Y">
          <input type="button" value="U">
          <input type="button" value="I">
          <input type="button" value="O">
          <input type="button" value="P">
        </div>
<div class="keys">
          <input type="button" value="A">
          <input type="button" value="S">
          <input type="button" value="D">
          <input type="button" value="F">
          <input type="button" value="G">
          <input type="button" value="H">
          <input type="button" value="J">
          <input type="button" value="K">
          <input type="button" value="L">
        </div>
<div class="keys">
          <input type="button" value="Z">
          <input type="button" value="X">
          <input type="button" value="C">
          <input type="button" value="V">
          <input type="button" value="B">
          <input type="button" value="N">
          <input type="button" value="M">
        </div>
<div class="keys">
          <input type="button" value="SPACE">
        </div>
</div>
</div>
</body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #dde1e7;
  /* background: #131419; */
  flex-direction: column;
}
.container{
  width: 60%;
}
.wrapper{
  min-width: 750px;
  max-width: 1000px;
  padding: 25px;
  border-radius: 10px;
  background: #dde1e7;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
  /* background: #131419; */
  /* box-shadow: 2px 2px 5px rgba(0,0,0,0.5),
              -3px -3px 7px rgba(255,255,255,0.05); */
}
.wrapper .keys{
  display: flex;
  justify-content: center;
}
.wrapper .keys input{
  height: 50px;
  min-width: 50px;
  padding: 10px;
  border: none;
  outline: none;
  background: #dde1e7;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
  /* background: #131419; */
  /* box-shadow: 2px 2px 5px rgba(0,0,0,0.5),
              -3px -3px 7px rgba(255,255,255,0.05); */
  margin: 10px;
  color: grey;
  /* color: #c7c7c7; */
  font-size: 20px;
  border-radius: 5px;
  cursor: default;
}
.wrapper .keys input:focus{
  font-size: 19px;
  color: #3498db;
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 2px 2px 5px rgba(94,104,121,0.288);
  /* box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5),
              inset -3px -3px 7px rgba(255,255,255,0.05); */
}
.wrapper .keys input[value="SPACE"]{
  width: 60%;
}

Video Tutorial of Neumorphism Keyboard Design

You might like this:

Neumorphism Keyboard Design [Source Codes]

Thanks for visiting, Keep visiting.

5 Comments

Post a Comment

About Us

Contact Form