CSS Neumorphic UI Button (Code Snippet)

<div class="neumorphic-container">
  <button class="neumorphic-button">Neumorphic Button</button>
</div>

body {
  background-color: #e0e5ec;
}
.neumorphic-container {
  background-color: #e0e5ec;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Arial', sans-serif;
}
.neumorphic-button {
  padding: 20px 40px;
  font-size: 18px;
  background-color: #e0e5ec;
  border: none;
  border-radius: 20px;
  color: #555;
  cursor: pointer;
  outline: none;
  box-shadow: 
    -7px -7px 20px 0px #fff9,
    -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002,
    4px 4px 5px 0px #0001,
    inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001,
    inset 0px 0px 0px 0px #fff9,
    inset 0px 0px 0px 0px #0001;
  transition: box-shadow 0.3s ease-in-out;
}

.neumorphic-button:active {
  box-shadow: 
    0px 0px 0px 0px #fff9,
    0px 0px 0px 0px #fff9,
    0px 0px 0px 0px #0001,
    0px 0px 0px 0px #0001,
    inset -7px -7px 20px 0px #fff9,
    inset -4px -4px 5px 0px #fff9,
    inset 7px 7px 20px 0px #0003,
    inset 4px 4px 5px 0px #0001;
}

CSS Neumorphic UI Button

Share Code Snippet