Colorful Neumorphism Keyboard Design using only HTML & CSS

0

Hello readers, today in this blog you will learn how to create a Colorful Neumorphism keyboard using only HTML and CSS. I previously blogged about how to create a Creative Neumorphism ID tag using CSS and HTML, and now I will create a Neumorphism keyboard using only HTML and CSS.

Neumorphism (also known as neomorphic) is a relatively new design trend and a very popular term lately. Its aesthetic is represented by a minimalist, realistic user interface that presents a new take on schematism.​

​In this program (Colorful Neumorphism Keyboard Design )

There is only one keyboard with a neomorphic effect on the web page. It is a pure CSS program, which means this keyboard is created using only HTML and CSS for design purposes. The keyboard keys do not work, which means that when you press a specific key, only the effect is displayed. If you want to display data on a specific keystroke, you must add JavaScript for this operation.

You Might Like :

How to create a Pricing Card with Sliding Animation using only HTML & CSS.

How to Design the user interface of the Creative Neumorphism ID tag using CSS and HTML.

Step 1:

To create this program: ( Colorful Neumorphism Keyboard Design ). Initially you need to two files one HTML (.html) and another CSS file (.css). After creating these files, just paste the following codes into your VS IDE code sample and create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<!-- Created By Code With Nepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>ColorFul Keyboard Design | CodeWithNepal</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>

Step 2:

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .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: #005de9;
  /* 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%;
}

Output :

LEAVE A REPLY

Please enter your comment!
Please enter your name here