GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

css 버튼 hover 효과 모음 9종 — 수상작에서 반복되는 기법

· Godrich · 9종 · 8분 읽기

버튼SCSSReact바닐라 JS호버클릭CTA 버튼

css 버튼 hover 효과 모음은 마우스를 올렸을 때 버튼이 어떻게 반응하는지를 기법별로 나눠 정리한 것입니다. 아홉 개 중 하나는 누르는 순간 버튼 폭이 원으로 줄어 스피너가 돌고, 끝나면 체크가 그려진 뒤 원래 폭으로 돌아옵니다.

커서 스포트라이트01 spotlight-follow 테두리 빛 러너02 conic-glow-runner 마그네틱 당김 + 라벨 역시차03 magnet-pull 액체 채움 (물결 수면)04 liquid-fill 글자 분할 슬라이드05 split-text-slide 아이콘 회전 교체06 icon-swap-spin 눌림 반동 (스쿼시·스트레치)07 squash-press 모서리 괄호 조준08 corner-brackets 로딩 모프 (버튼→스피너→체크)09 state-morph-check

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

디자인상을 받은 사이트를 뜯어보면 버튼 효과가 제각각인 것 같아도 쓰이는 자리는 늘 같습니다. 그래서 인기순이 아니라 버튼이 사람을 만나는 순서대로 놓았습니다. 먼저 멀리서 눈에 띄고(01·02), 버튼 호버 효과로 커서가 다가오며 반응하고(03), 가리키는 동안 표면·글자·아이콘이 바뀌고(04·05·06), 누르기 직전에 조준이 모이고 누르는 순간 반응이 손끝에 돌아오고(07·08), 마지막으로 기다리는 동안 상태를 알립니다(09). 브랜드 이름이 아니라 기법만 가져왔으므로 아홉 개 전부 자기 색·자기 글자로 바꿔 쓰면 됩니다. 호버 전의 기본 생김새를 고르는 일은 css 버튼 디자인이 먼저고, 손을 뗀 다음 상태가 바뀌는 구간은 css 버튼 클릭 효과가 이어받습니다.

01커서 스포트라이트

css 버튼 디자인에서 무엇이 보이나

커서가 지나간 자리를 따라 둥근 빛무리가 버튼 표면을 훑습니다. 빛의 중심 가로 위치만 --mx 한 줄로 넘기면 나머지는 그라디언트가 그립니다.

커서 스포트라이트
새 창에서 열기

01 · 커서 스포트라이트 — 측정 누적면적 7.528% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

radial-gradient@propertypointermove

코드에서 볼 곳

이 속성을 @property로 등록해 두는 것이 핵심입니다.

@property --mx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
.spot::before {
  background: radial-gradient(circle 96px at var(--mx) 50%, rgba($color, .95), rgba($color, 0) 72%);
}
@keyframes spot-sweep {
  0%   { --mx: 8%; }
  50%  { --mx: 92%; }
  100% { --mx: 8%; }
}

02테두리 빛 러너

화면에서 일어나는 일

밝은 점 하나가 테두리를 따라 끊김 없이 한 바퀴씩 돕니다.

테두리 빛 러너
새 창에서 열기

02 · 테두리 빛 러너 — 측정 누적면적 1.381% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

conic-gradientmask-composite@property --angle

코드 읽는 법

원뿔형 그라디언트(conic-gradient)를 통째로 돌리고 테두리 굵기만큼만 마스크로 남기는 방식이라 알약이든 사각형이든 모양을 그대로 따라갑니다.

.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: $sp-1;
  background: conic-gradient(from var(--angle),
    rgba($color, 0) 0deg,
    rgba($color, 0) 232deg,
    rgba($color, 1) 300deg,
    rgba($color, .2) 330deg,
    rgba($color, 0) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: glow-run $duration $easing infinite;
}

03마그네틱 당김 + 라벨 역시차

어떤 움직임인가

버튼은 커서 쪽으로 끌려오고, 안쪽 글자는 같은 좌표에 음수를 곱해 반대로 밀립니다.

마그네틱 당김 + 라벨 역시차
새 창에서 열기

03 · 마그네틱 당김 + 라벨 역시차 — 측정 누적면적 10.698% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translate역시차pointerleave

어디를 바꾸면 되나

이 부호 하나가 두 층을 갈라놓아 납작한 사각형이 살짝 떠 있는 것처럼 보입니다.

field.addEventListener('pointermove', function (e) {
  var r = btn.getBoundingClientRect();
  var dx = (e.clientX - (r.left + r.width / 2)) * 0.35;
  var dy = (e.clientY - (r.top + r.height / 2)) * 0.35;
  btn.classList.remove('is-demo');
  btn.style.translate = dx + 'px ' + dy + 'px';
  label.style.translate = (-dx * 0.4) + 'px ' + (-dy * 0.4) + 'px';
});

04액체 채움 (물결 수면)

무엇이 보이나

아래에서 색이 차오르는데 수면이 평평하지 않고 물결처럼 기울어집니다.

액체 채움 (물결 수면)
새 창에서 열기

04 · 액체 채움 (물결 수면) — 측정 누적면적 6.315% · 움직인 프레임 13/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

물결 타일translateoverflow

코드에서 볼 곳

완전한 원이 아니라 네 모서리를 42%만큼 둥글린 260px 정사각형을 통째로 돌리면서 동시에 위로 밀어 올리기 때문입니다.

.liq__wave {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 260px;
  height: 260px;
  border-radius: 42%;
  background: $color;
  transform: translate(-50%, 100%);
}
@keyframes liq-rise {
  0%   { transform: translate(-50%, 100%) rotate(0deg); }
  52%  { transform: translate(-50%, 68%) rotate(180deg); }
  66%  { transform: translate(-50%, 68%) rotate(230deg); }
  100% { transform: translate(-50%, 100%) rotate(360deg); }
}

05글자 분할 슬라이드

화면에서 일어나는 일

글자가 하나씩 위로 빠져나가고 같은 글자가 아래에서 올라와 자리를 메웁니다.

글자 분할 슬라이드
새 창에서 열기

05 · 글자 분할 슬라이드 — 측정 누적면적 2.35% · 움직인 프레임 19/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

글자별 지연translate: 0 -50%clip

코드 읽는 법

글자마다 창(overflow: hidden) 하나에 같은 글자를 두 겹 쌓아 두고, 지연 시간만 글자 번호에 비례시키면 물결처럼 번집니다.

.split__ch {
  display: inline-block;
  overflow: hidden;
  height: 1.25em;
  line-height: 1.25;
}
.split.is-demo .split__ch b {
  animation: split-roll $duration $easing infinite;
  animation-delay: calc(var(--i) * #{$stagger});
}
@keyframes split-roll {
  0%,  12% { translate: 0 0; }
  42%, 68% { translate: 0 -50%; }
  100%     { translate: 0 0; }
}

06아이콘 회전 교체

어떤 움직임인가

아이콘이 세로축으로 반 바퀴 돌면서 뒷면에 있던 다른 아이콘으로 바뀝니다.

아이콘 회전 교체
새 창에서 열기

06 · 아이콘 회전 교체 — 측정 누적면적 0.485% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

rotateYbackface-visibilityPhosphor

어디를 바꾸면 되나

두 아이콘을 같은 칸에 앞뒤로 겹쳐 두고 각자 뒷면만 숨기면 끝이라, 담기에서 담김으로 뜻이 바뀔 때도 라벨 글자는 그대로 두면 됩니다.

.swap__ic {
  position: relative;
  width: 34px;
  height: 34px;
  transform-style: preserve-3d;
}
.swap__face { position: absolute; inset: 0; display: flex; backface-visibility: hidden; }
.swap__face--back { transform: rotateY(180deg); }
@keyframes swap-spin {
  0%,  22%  { transform: rotateY(0deg); }
  50%, 72%  { transform: rotateY(180deg); }
  100%      { transform: rotateY(360deg); }
}

07눌림 반동 (스쿼시·스트레치)

무엇이 보이나

누르는 순간 세로로 납작해지며 가로로 퍼지고, 놓으면 크게 한 번 튀어 올랐다가 작게 한 번 더 흔들린 뒤 안착합니다.

눌림 반동 (스쿼시·스트레치)
새 창에서 열기

07 · 눌림 반동 (스쿼시·스트레치) — 측정 누적면적 5.59% · 움직인 프레임 13/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scale$ease-popbox-shadow

코드에서 볼 곳

그림자도 같은 박자에 맞춰 얕아져야 비로소 고무공처럼 보입니다.

.squash { transform-origin: center bottom; }
@keyframes squash-press {
  0%,  34%  { transform: scale(1, 1);      box-shadow: $shadow-raised; }
  46%       { transform: scale(1.06, .88); box-shadow: $shadow-press; }
  60%       { transform: scale(.97, 1.06); box-shadow: $shadow-raised; }
  72%       { transform: scale(1.02, .98); box-shadow: $shadow-raised; }
  86%, 100% { transform: scale(1, 1);      box-shadow: $shadow-raised; }
}
.squash:active {
  animation: none;
  transform: scale(1.06, .88);
  box-shadow: $shadow-press;
}

08모서리 괄호 조준

화면에서 일어나는 일

네 모서리의 ㄱ자 조각이 바깥에서 모여들어 테두리를 완성합니다.

모서리 괄호 조준
새 창에서 열기

08 · 모서리 괄호 조준 — 측정 누적면적 2.501% · 움직인 프레임 19/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translatefocus-visible순차 지연

코드 읽는 법

조각마다 다른 것은 지우는 변 두 쌍과 이동 방향이고 이동 거리는 18px로 같아서, 이 거리를 바꾸면 네 조각이 한꺼번에 넓어지거나 좁아집니다.

.brk__c {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid $color;
  --tx: -18px;
  --ty: -18px;
}
.brk__c--tr { top: -8px; right: -8px; border-left: 0; border-bottom: 0; --tx: 18px; --i: 1; }
.brk.is-demo .brk__c {
  animation: brk-close $duration $easing infinite;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes brk-close {
  0%       { translate: var(--tx) var(--ty); opacity: 0; }
  38%, 66% { translate: 0 0;                 opacity: 1; }
  100%     { translate: var(--tx) var(--ty); opacity: 0; }
}

09로딩 모프 (버튼→스피너→체크)

어떤 움직임인가

누르면 글자가 사라지며 폭이 원으로 좁아지고, 스피너가 돌다가 체크가 그려진 뒤 원래 폭으로 돌아옵니다.

로딩 모프 (버튼→스피너→체크)
새 창에서 열기

09 · 로딩 모프 (버튼→스피너→체크) — 측정 누적면적 6.331% · 움직인 프레임 21/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

widthstroke-dashoffsetaria-busy

어디를 바꾸면 되나

세 상태가 한 요소 안에서 이어지므로 로딩 화면을 따로 띄우지 않아도 되고, 기다리는 동안 두 번 눌리지도 않습니다.

@keyframes morph-box {
  0%,  10%  { width: 200px; }
  28%, 62%  { width: 56px; }
  84%, 100% { width: 200px; }
}
@keyframes morph-draw {
  0%,  60%  { stroke-dashoffset: 26; opacity: 0; }
  64%       { stroke-dashoffset: 26; opacity: 1; }
  76%, 86%  { stroke-dashoffset: 0;  opacity: 1; }
  94%, 100% { stroke-dashoffset: 26; opacity: 0; }
}
.morph.is-busy { width: 56px; }
.morph.is-busy .morph__label { opacity: 0; }
.morph.is-busy .morph__spin { opacity: 1; animation: morph-turn 800ms linear infinite; }

어디서 깨지는가 — 함정

아홉 개를 만들면서 제일 오래 잡고 있던 것은 01번과 02번이 아예 안 움직이던 문제였습니다. --mx와 --angle을 키프레임에 넣어 두면 당연히 부드럽게 변할 줄 알았는데, 브라우저는 등록되지 않은 사용자 지정 속성을 그냥 문자열로 봅니다. 문자열에는 중간값이 없으니 0%에서 100%로 뚝 끊기고, 24프레임을 뽑아 보면 빛이 두 칸에만 서 있다가 사라집니다. @property로 syntax: "<percentage>"나 "<angle>"을 선언해 타입을 알려 준 뒤에야 러너가 실제로 한 바퀴를 돌았습니다.

두 번째는 루프의 끝과 처음이 어긋나는 순간이동이었습니다. 02번 러너를 340deg에서 끊고 0deg로 되돌렸더니 한 바퀴마다 빛이 튀어서, 각도를 정확히 360deg까지 돌려 다음 바퀴의 0deg와 맞물리게 했습니다. 06번 아이콘도 180deg에서 멈추고 되감으면 뒷면이 앞으로 슬쩍 되돌아오는 것이 보여 360deg로 이어 붙였습니다. 04번은 반대로 너무 빨랐습니다. 처음에는 320px짜리 물방울을 썼는데, 렌더한 다섯 번째 프레임에서 이미 버튼이 가득 차 물결 수면이 보이지 않아 260px로 줄이고 차오르는 구간을 전체의 52%까지 늘린 뒤에야 곡면이 글자를 가로지르는 장면이 프레임에 남았습니다. 05번은 창 높이를 1.1em으로 잡았다가 한글 받침이 잘려 1.25em으로 올렸고, 그러고 나서야 아홉 개 전부 320px 폭 검사에서 넘침 0으로 통과했습니다. 마지막으로 09번만은 transform이 아니라 width를 움직입니다. 레이아웃을 다시 계산하게 만드는 값이라 되도록 피하는 것이 맞지만, 알약이 진짜 원이 되려면 폭이 줄어야 해서 overflow: hidden과 격자 겹치기로 글자가 찌그러지지 않게 잡아 두고 이 하나만 예외로 두었습니다. 버튼 하나가 기다림을 표시하기 시작하면 화면 전체가 그 일을 대신하는 로딩페이지 디자인과 같은 문제로 넘어갑니다. 압축 비밀번호 cpm3zu6e로 여는 zip 안의 소스에는 위 수정이 전부 반영돼 있어, 받은 파일을 그대로 열면 여기 적힌 값과 같은 코드가 들어 있습니다.

접근성

아홉 개 전부 prefers-reduced-motion: reduce에서 장식 루프를 끄되 신호는 남깁니다. 빛무리는 가운데 고정, 러너는 은은한 테두리 한 겹, 물결은 채워진 상태, 조각 넷은 모인 상태로 멈춥니다. 08번 조준선은 마우스 없이도 쓸 수 있도록 :focus-visible에 같은 모양을 붙였고, 09번은 기다리는 동안 aria-busy="true"로 상태를 알린 뒤 끝나면 지웁니다.

상태 움직임이 켜져 있을 때 reduced-motion 일 때
가리킴 (01·02·04·05·06) 빛·물결·글자가 2초 주기로 돈다 최종 모습으로 정지, 색 대비는 그대로
누름 (03·07) 당김과 눌림 반동이 이어진다 이동·스케일 없이 색과 그림자만
포커스·대기 (08·09) 조각이 모이고 체크가 그려진다 조각은 모인 채 고정, 체크는 즉시 표시

사용자 지정 속성을 애니메이션하려면 타입 등록이 필요하다는 규칙은 MDN의 @property 문서에 정리돼 있습니다. 같은 방아쇠를 쓰는 다른 효과는 호버 카테고리에, 실제 전환 버튼에 쓰는 것들은 CTA 카테고리에 모아 두었습니다.

FAQ

css 버튼 클릭 효과까지 자바스크립트 없이 쓸 수 있는 건 몇 개인가요?

아홉 개 중 다섯 개는 CSS만으로 끝납니다. 커서 좌표를 읽는 01번과 03번, 글자를 한 칸씩 쪼개 쌓는 05번, 누름 상태를 바꾸는 09번만 각각 스무 줄 안쪽의 바닐라 자바스크립트를 씁니다. 그 네 곳이 하는 일도 CSS 변수와 클래스를 바꾸고 글자 칸을 만들어 주는 것뿐이라, 스크롤 라이브러리나 애니메이션 라이브러리는 하나도 들어가지 않습니다. 수상작 기법을 한 줄짜리로 줄인 판은 바이브코딩 마이크로 인터랙션에 모여 있습니다.

터치 기기에서는 호버가 없는데 그대로 써도 되나요?

호버가 시작 신호인 항목(01·02·04·05·06)은 터치에서 아무 일도 일어나지 않으므로, 그런 자리에는 07번처럼 :active로도 같은 결과가 나오는 효과를 함께 두는 편이 안전합니다. 07번과 09번은 누름과 대기 상태를 쓰므로 터치에서도 그대로 작동하고, 08번은 :focus-visible 덕분에 키보드에서도 같은 모양이 나옵니다.

색과 속도를 우리 브랜드에 맞게 바꾸려면 어디를 고치나요?

각 SCSS 파일 맨 위 세 줄($duration·$easing·$color, 05번만 $color 대신 $stagger)만 바꾸면 됩니다. React 판도 같은 세 값을 props로 받아 CSS 사용자 지정 속성으로 넘기므로, 컴포넌트를 부를 때 duration={1200}처럼 넣으면 되고 나머지 코드는 건드리지 않습니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.