M/s VIKASH TECH - We Write Imaginations to Codes..!!

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.
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 difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Custom Keyboard Design | CodingNepal</title>
    <link rel="stylesheet" href="blog.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

@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%;
}
Category :

Comments

No comments found.

….

FLAT 50% OFF

Latest Posts

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

How to verify an email address before sending emails?

Email marketing is a great way to reach your clients, but while sending emails from a mail service provider, its…

Templates - In Flask

Templates are the structure of a website. Here in Python Flask. templates are treated as the views, which means these…

%d bloggers like this: