Home ›Html and Css ›Keyboard key using html and css
MASIGNASUKAv102
6510051498749449419

Keyboard key using html and css

Keyboard key using html and css
Add Comments
Tuesday, January 3, 2023

Keyboard key design using html and css 



In this post we discuss how to design attractive keyboard key using html and css. 

Here we create two file for key design first is index.html and another is style.css for styling. Let's start....... 


 index.html 


<!DOCTYPE  html>
<html>
<head>
<meta charset="utf-8">
<title>Keyboard Keys </title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div>
<span><i>A</i></span>
<span><i>B</i></span>
<span><i>C</i></span><br>
<span><i>X</i></span>
<span><i>Y</i></span>
<span><i>X</i></span>
</div>
</body>
</html>

style.css


*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body
{
display: flex; justify-content: center; align-items: center; min-height: 100vh;
background: #232323;
}

span
{
position: relative;
display: inline-block;
width: 70px;
height: 70px;
padding: 8px 15px;
margin: 8px 4px;
border-radius: 10px;
background: linear-gradient(180deg, #282828,#202020);
box-shadow: inset -8px 0 8px rgba(0,0,0,0.15),
inset 0-8px 8px rgba(0,0,0,0.25),
0 0 0 2px rgba(0,0,0,0.75),
10px 20px 25px rgba(0,0,0,0.4);
overflow: hidden;font-size:10px;

}


span::before
{
content:'';
position: absolute;
top: 4px;
left: 4px;
bottom: 14px;
right: 12px;
text-align :center; 
background: linear-gradient(90deg, #232323, #4a4a4a);
border-radius: 10px;
box-shadow: -10px -10px 10px rgba(255,255,255,0.25),
10px 5px 10px rgba(0,0,0,0.15);
border-left: 1px solid #0004;
border-bottom: 1px solid #0004;
border-top: 1px solid #0009;
}
span i
{
position: relative; color: #fff;
font-style: normal;
font-size: 1.5em;
text-transform: uppercase;
}


I hope you are understand this code if any query please comment  we try to solve your query. 

Also learn -


MCA Waala

comment 0 comments

more_vert