In this tutorial, I will show you how to Make a Beautiful Neumorphic button in HTML and CSS
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeuMorphism box</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<button>BUTTON</button>
</div>
</body>
</html>
CSS code
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
background: #212121;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.container button{
width: 400px;
padding: 30px 0;
border-radius: 8px;
border: none;
border-radius: 50px;
background: linear-gradient(145deg, #1e1e1e, #232323);
box-shadow: 20px 20px 47px #0d0d0d,
-20px -20px 47px #353535;
color: #fafafa;
transition: all 0.3s ease-out;
font-size: 26px;
font-family: 'Segoe UI', sans-serif;
font-weight: bold;
letter-spacing: 6px;
text-align: center;
}
.container button:active{
color: #fafafa;
border-radius: 50px;
background: linear-gradient(145deg, #232323, #1e1e1e);
box-shadow: 20px 20px 47px #0d0d0d,
-20px -20px 47px #353535;
}
Make a neumorphism button in CSS
Reviewed by Medics
on
April 13, 2020
Rating:
Reviewed by Medics
on
April 13, 2020
Rating:
Thank You so much. I am trying to create static html page
ReplyDelete