천천히 도는 그라데이션 테두리 위로 밝은 빛줄기가 반복해서 스쳐 지나가는 CTA 버튼 장식.
디자인 아틀라스<button class="shim" id="sb">Get started</button>.shim{--a:0deg;position:relative;overflow:hidden;border:0;cursor:pointer;padding:16px 36px;border-radius:999px;
font-weight:700;font-size:15px;color:#fff;isolation:isolate;
background:conic-gradient(from var(--a),var(--accent),var(--accent-2),var(--accent-3),var(--accent))}
.shim::before{content:"";position:absolute;inset:2px;border-radius:inherit;background:var(--bg);z-index:-1}
.shim::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
background:linear-gradient(75deg,transparent,rgba(255,255,255,.65),transparent);
animation:sweep 2.4s ease-in-out infinite}
@keyframes sweep{0%{left:-60%}55%,100%{left:140%}}const el = document.getElementById('sb');
let a = 0;
(function loop(){ a = (a + 0.9) % 360; el.style.setProperty('--a', a + 'deg'); requestAnimationFrame(loop); })();버튼 표면 위로 밝은 빛줄기 하나가 대각선으로 반복해서 스쳐 지나가며 광택을 내고, 은은하게 도는 그라데이션 테두리까지 함께 둬서 "지금 눌러야 할 버튼"이라는 시각적 무게를 더합니다.
가운데는 어두운 단색으로 채우고 테두리 두께만큼만 conic-gradient가 드러나게 하는 이중 배경 트릭으로 링을 만들고, overflow: hidden으로 잘린 좁은 흰색 띠를 그 위에서 반복 이동시켜 광택 스윕을 겹칩니다. 테두리 회전과 스윕 이동의 속도를 서로 다르게 둬야 두 리듬이 겹치지 않아 기계적으로 보이지 않습니다.
샤인 스윕이 카드 등 다양한 표면에 드물게(호버 시 1회 정도) 쓰인다면, 시머 버튼은 CTA 버튼 전용으로 늘 반복 재생하며 시선을 끄는 용도로 씁니다.
랜딩 페이지의 메인 CTA, 무료 체험 시작 버튼처럼 딱 하나만 강조하고 싶을 때 씁니다. 화면에 여러 개 쓰면 전부 덜 중요해 보이니 페이지당 하나로 제한하세요.