디자인 아틀라스2019~2020년 Dribbble에서 유행했습니다. box-shadow 두 개(왼쪽 위는 밝게, 오른쪽 아래는 어둡게)가 전부입니다. 눌린 상태는 inset 그림자로 뒤집습니다.
대비가 매우 낮아서 버튼인지 아닌지 구분이 어렵다는 접근성 비판을 받았고, 실무에서는 토글·슬라이더 같은 일부 컨트롤에만 제한적으로 씁니다.
뉴모피즘
Neumorphism
배경과 같은 색의 요소에 밝은 그림자와 어두운 그림자를 동시에 줘서, 표면이 튀어나오거나 눌린 것처럼 보이게 하는 스타일.
다른 이름: Soft UINeo-skeuomorphism
···
<div class="row"><button class="neu" aria-pressed="false">♪</button><button class="neu" aria-pressed="true">❚❚</button><button class="neu" aria-pressed="false">➜</button></div>body{background:#e4e8ef}
.row{display:flex;gap:28px}
.neu{width:84px;height:84px;border-radius:24px;border:0;background:#e4e8ef;color:#6b7280;font-size:24px;cursor:pointer;
box-shadow:9px 9px 18px #c2c6cc,-9px -9px 18px #ffffff;transition:box-shadow .2s,color .2s}
.neu[aria-pressed=true]{color:#5b5bf7;box-shadow:inset 7px 7px 14px #c2c6cc,inset -7px -7px 14px #ffffff}document.querySelectorAll('.neu').forEach(b => b.onclick = () => b.setAttribute('aria-pressed', b.getAttribute('aria-pressed') !== 'true'));