Claymorphism

admin1234

Jan 31, 2026 5

Live Preview

Live Editor

<button class="clay-btn">Press Me</button>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#f3f4f6;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* clay button */
.clay-btn{
  padding:20px 50px;
  font-size:18px;
  font-weight:600;
  color:#1f2933;
  background:#ffedd5;
  border:none;
  border-radius:24px;
  cursor:pointer;
  box-shadow:
    12px 12px 24px rgba(0,0,0,.18),
    -12px -12px 24px rgba(255,255,255,.9),
    inset -4px -4px 10px rgba(255,255,255,.7),
    inset 4px 4px 10px rgba(0,0,0,.1);
  transition:.25s cubic-bezier(.22,1,.36,1);
}

/* hover = soft lift */
.clay-btn:hover{
  transform:translateY(-4px);
  box-shadow:
    16px 16px 30px rgba(0,0,0,.22),
    -16px -16px 30px rgba(255,255,255,.95),
    inset -4px -4px 10px rgba(255,255,255,.7),
    inset 4px 4px 10px rgba(0,0,0,.1);
}

/* active = pressed clay */
.clay-btn:active{
  transform:translateY(2px) scale(.97);
  box-shadow:
    inset 8px 8px 16px rgba(0,0,0,.2),
    inset -8px -8px 16px rgba(255,255,255,.85);
}

Categories

Claymorphism

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet