Neumorphism Button
Create Neumorphism Button Using HTML and CSS
Source Code :-
HTML :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neomorphism</title>
<!-- this is custom css -->
<link rel="stylesheet" href="22_september.css">
</head>
<body>
<div>
<button class="noselect red">BUTTON </button>
<button class="noselect green">BUTTON</button>
</div>
<div>
<button class="noselect blue">BUTTON</button>
<button class="noselect purple">BUTTON</button>
</div>
</body>
</html>
CSS :-
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #333;
}
button{
width: 200px;
height: 75px;
cursor: pointer;
background-color: #333;
margin: 20px;
border: none;
border-radius: 10px;
box-shadow:-5px -5px 15px #444,5px 5px 15px #222,
inset 5px 5px 10px #444,
inset -5px -5px 10px #222;
color: rgb(124, 124, 124);
font-size: 18px;
letter-spacing: 2px;
}
button:hover{
transition: 0.4s;
}
button:active{
box-shadow: -5px -5px 15px #444,
5px 5px 15px #222,
inset 5px 5px 10px #222,
inset -5px -5px 10px #444;
font-size: 17.5px;
}
button:focus{
outline: none;
}
/* color button */
.red:hover{
color: #f07171;
text-shadow: 0px 0px 10px #f07171;
}
.green:hover{
color: greenyellow;
text-shadow: 0px 0px 10px greenyellow;
}
.blue:hover{
color: dodgerblue;
text-shadow: 0px 0px 10px dodgerblue;
}
.purple:hover{
color: rgb(255, 0, 255);
text-shadow: 0px 0px 10px rgb(255, 0, 255);
}
Comments
Post a Comment