UI Showcase

인터랙션을 보고, 복사하고, 사용하세요

Tags:

Glow Button

쉬움

마우스 호버 시 부드럽게 발광하는 버튼

#hover#css-only#gradient

Ripple Button

보통

클릭 시 물결 효과가 퍼지는 머티리얼 디자인 버튼

#click#javascript#micro

Magnetic Button

어려움

마우스 커서를 따라 움직이는 자석 버튼

#hover#javascript#smooth

Pulse Button

쉬움

펄스 애니메이션이 있는 버튼

#animation#css-only

Neon Button

쉬움

네온 사인 효과가 있는 버튼

#hover#css-only#bold

Loading Button

보통

로딩 상태를 표시하는 버튼

#click#javascript#micro

Hover Lift Card

쉬움

마우스 호버 시 위로 떠오르는 카드

#hover#css-only#smooth

Flip Card

보통

클릭 시 3D로 뒤집히는 카드

#click#css-only#animation

Glass Card

쉬움

글래스모피즘 효과가 있는 카드

#hover#css-only#glassmorphism

Tilt Card

어려움

마우스 움직임에 따라 3D로 기울어지는 카드

#hover#javascript#smooth

Stacked Card

쉬움

레이어 쌓임 효과가 있는 카드

#hover#css-only#smooth

Floating Label Input

보통

포커스 시 라벨이 위로 올라가는 입력창

#css-only#smooth#micro

Animated Checkbox

쉬움

부드러운 애니메이션이 있는 체크박스

#click#css-only#animation

Search Input

쉬움

검색 입력창 (클리어 버튼 포함)

#css-only#javascript#micro

Password Toggle

쉬움

비밀번호 표시/숨김 토글 버튼

#click#javascript#micro

Fade In On Scroll

보통

스크롤 시 부드럽게 나타나는 애니메이션

#scroll#javascript#smooth

Slide In

보통

옆에서 슬라이드되어 나타나는 애니메이션

#scroll#javascript#smooth

Bounce In

보통

튀면서 나타나는 애니메이션

#scroll#javascript#animation

Scale In

쉬움

크기 변화로 나타나는 애니메이션

#scroll#javascript#smooth

Spin Loader

쉬움

회전하는 원형 로더

#animation#css-only

Dot Loader

쉬움

3개의 점이 깜빡이는 로더

#animation#css-only

Bar Loader

쉬움

막대가 상하로 움직이는 로더

#animation#css-only

Slide Up Modal

보통

하단에서 슬라이드업 되는 모달

#click#javascript#smooth

Linear Progress

쉬움

선형 프로그레스바

#animation#css-only#smooth

Underline Tab

쉬움

하단 언더라인 탭

#click#css-only#smooth

Basic Tooltip

쉬움

기본 툴팁 (4방향)

#hover#css-only#micro

Gradient Shift Button

쉬움

호버 시 그라디언트가 이동하는 버튼

#hover#css-only#gradient

Icon Button

쉬움

아이콘만 있는 버튼 (다양한 스타일)

#hover#css-only#micro

Split Button

보통

메인 액션과 드롭다운이 분리된 버튼

#click#javascript#dropdown

Ghost Button

쉬움

투명한 배경의 고스트 버튼

#hover#css-only

Outline Button

쉬움

외곽선 스타일 버튼

#hover#css-only

Parallax Card

어려움

마우스 움직임에 따라 패럴랙스 효과가 있는 카드

#hover#javascript#smooth

Blur Card

쉬움

호버 시 블러 효과가 적용되는 카드

#hover#css-only#glassmorphism

Border Gradient Card

보통

애니메이션되는 그라디언트 테두리 카드

#animation#css-only#gradient

Expand Card

보통

클릭 시 내용이 확장되는 카드

#click#javascript#smooth

Range Slider

보통

커스텀 스타일 범위 슬라이더

#javascript#smooth

Toggle Switch

쉬움

토글 스위치 (iOS 스타일)

#click#css-only#smooth

Radio Button

쉬움

커스텀 스타일 라디오 버튼

#click#css-only

File Upload

어려움

드래그 앤 드롭 파일 업로드

#javascript#drag-drop

Auto Resize Textarea

보통

내용에 따라 자동으로 높이가 조절되는 텍스트영역

#javascript#smooth

Fade Modal

보통

페이드 인/아웃 모달

#click#javascript#smooth

Zoom Modal

보통

줌 효과 모달

#click#javascript#smooth

Side Drawer

보통

우측에서 슬라이드되는 사이드 드로어

#click#javascript#smooth

Circular Progress

보통

원형 프로그레스 인디케이터

#animation#css-only#smooth

Step Progress

보통

다단계 진행 표시

#javascript#smooth

Pill Tab

쉬움

알약 스타일 탭

#click#css-only#smooth

Vertical Tab

쉬움

세로형 탭

#click#css-only

Animated Tooltip

보통

애니메이션 효과가 있는 툴팁

#hover#css-only#animation

Arrow Tooltip

보통

화살표가 있는 툴팁 (4방향)

#hover#css-only#micro

Pulse Loader

쉬움

펄싱 원형 로더

#animation#css-only

Wave Loader

보통

파도 효과 로더

#animation#css-only

Grid Loader

보통

3x3 그리드 로더

#animation#css-only

Toast Notification

어려움

토스트 알림 (성공, 에러, 정보, 경고)

#javascript#animation#micro

Alert Box

쉬움

닫기 버튼이 있는 알림 박스

#click#javascript#micro

Badge

쉬움

배지 컴포넌트 (다양한 스타일)

#css-only#micro

Basic Dropdown

보통

기본 드롭다운 셀렉트

#click#javascript

Menu Dropdown

보통

아이콘이 있는 메뉴 드롭다운

#click#javascript

Select Dropdown

어려움

다중 선택 드롭다운

#click#javascript

Breadcrumb

쉬움

브레드크럼 내비게이션

#css-only#micro

Pagination

보통

페이지 네비게이션

#click#javascript

Stepper

보통

다단계 스테퍼

#javascript#smooth

Shimmer Button

보통

반짝이는 빛 효과가 이동하는 버튼

#hover#css-only#shimmer#gradient

3D Button

쉬움

입체감 있는 3D 깊이 효과 버튼

#hover#css-only#3d

Liquid Button

보통

호버 시 액체처럼 흐르는 효과의 버튼

#hover#css-only#liquid#smooth

Morph Button

쉬움

클릭 시 형태가 변하는 모핑 버튼

#click#javascript#morph#animation

Social Button

쉬움

소셜 미디어 스타일 버튼 (Twitter, Facebook, GitHub, LinkedIn)

#hover#css-only#social

Neon Card

쉬움

네온 글로우 효과가 있는 카드

#hover#css-only#neon#glassmorphism

Product Card

보통

이미지, 가격, 장바구니 버튼이 있는 상품 카드

#click#javascript#ecommerce

Profile Card

보통

아바타, 이름, 소개, 통계가 있는 프로필 카드

#css-only#profile

Pricing Card

보통

가격, 기능 리스트, CTA 버튼이 있는 가격표 카드

#hover#css-only#pricing

Timeline Card

쉬움

타임라인 마커와 날짜가 있는 이벤트 카드

#css-only#timeline

Color Picker

보통

색상 견본으로 색상을 선택하는 컬러 피커

#click#javascript#color

Date Picker

쉬움

간단한 날짜 선택 인풋

#javascript#date

Tag Input

보통

태그 추가/제거가 가능한 태그 인풋

#javascript#tag

OTP Input

어려움

6자리 OTP/PIN 입력 필드

#javascript#otp

Star Rating

쉬움

별점 입력 컴포넌트 (1-5점)

#click#javascript#rating

Rotate In

보통

회전하며 페이드 인되는 애니메이션

#scroll#javascript#rotate#smooth

Flip In

보통

스크롤 시 플립 애니메이션

#scroll#javascript#flip#smooth

Reveal Text

보통

글자가 하나씩 나타나는 텍스트 애니메이션

#animation#javascript#reveal

Typewriter Text

보통

타자기 효과 텍스트 애니메이션

#animation#javascript#typewriter

Counter Animation

보통

숫자가 카운트업되는 애니메이션

#scroll#javascript#counter

Image Slider

보통

이미지 캐러셀 슬라이더 (화살표, 도트 네비게이션)

#click#javascript#slider#carousel

Content Slider

보통

카드 형태의 콘텐츠 슬라이더

#click#javascript#slider#carousel

Basic Accordion

쉬움

기본 확장 가능한 아코디언

#click#javascript#accordion

Nested Accordion

어려움

중첩된 아코디언 패널

#click#javascript#accordion#nested

Login Form

보통

이메일과 비밀번호로 로그인하는 폼

#form#validation#javascript

Signup Form

보통

회원가입 폼

#form#validation#javascript

Contact Form

쉬움

연락처 문의 폼

#form#javascript

Newsletter Form

쉬움

뉴스레터 구독 폼

#form#javascript

Multi-Step Form

어려움

다단계 폼

#form#javascript#smooth

Inline Form

쉬움

인라인 폼

#form#javascript

Basic Table

쉬움

기본 테이블

#table#css-only

Striped Table

쉬움

줄무늬 테이블

#table#css-only#hover

Sortable Table

보통

정렬 가능한 테이블

#table#javascript#sortable

Hover Table

쉬움

호버 효과가 있는 테이블

#table#hover#css-only

Action Table

보통

액션 버튼이 있는 테이블

#table#javascript#click

Circle Avatar

쉬움

원형 아바타 (다양한 크기)

#avatar#css-only

Status Avatar

쉬움

상태 표시 아바타

#avatar#status#css-only

Group Avatar

보통

그룹 아바타 (겹치는 효과)

#avatar#css-only#hover

Initial Avatar

쉬움

이니셜 아바타

#avatar#css-only

Border Avatar

쉬움

테두리 효과 아바타

#avatar#css-only#gradient

Color Badge

쉬움

색상별 배지

#badge#css-only

Icon Badge

쉬움

아이콘이 있는 배지

#badge#css-only

Dot Badge

쉬움

점 표시 배지

#badge#status#animation

Count Badge

쉬움

숫자 카운트 배지

#badge#css-only

Outline Badge

쉬움

외곽선 배지

#badge#css-only#hover

Vertical Timeline

보통

세로형 타임라인

#timeline#css-only

Horizontal Timeline

보통

가로형 타임라인

#timeline#javascript#click

Activity Timeline

쉬움

활동 타임라인

#timeline#css-only#hover

Progress Timeline

보통

진행 상태 타임라인

#timeline#javascript#smooth

Text Skeleton

쉬움

텍스트 스켈레톤 로더

#skeleton#loading#animation

Card Skeleton

쉬움

카드 스켈레톤 로더

#skeleton#loading#animation

List Skeleton

쉬움

리스트 스켈레톤 로더

#skeleton#loading#animation

Table Skeleton

쉬움

테이블 스켈레톤 로더

#skeleton#loading#animation

Bullet List

쉬움

기본 불릿 리스트

#list#css-only#hover

Numbered List

쉬움

번호가 매겨진 리스트

#list#ordered#css-only

Icon List

쉬움

아이콘이 있는 리스트

#list#css-only#hover

Check List

보통

체크리스트

#list#javascript#click

Detail List

보통

상세 정보 리스트

#list#css-only#hover

Basic Popover

보통

기본 팝오버

#popover#click#javascript

Hover Popover

보통

호버 팝오버

#popover#hover#javascript

Menu Popover

보통

메뉴 팝오버

#popover#click#javascript

Form Popover

어려움

폼 팝오버

#popover#form#javascript

Confirm Dialog

보통

확인 다이얼로그

#dialog#javascript#click

Alert Dialog

쉬움

알림 다이얼로그

#dialog#javascript#click

Form Dialog

보통

폼 다이얼로그

#dialog#form#javascript

Image Dialog

쉬움

이미지 다이얼로그

#dialog#javascript#click

Fullscreen Dialog

보통

전체화면 다이얼로그

#dialog#javascript#click

Info Banner

쉬움

정보 배너

#banner#javascript

Success Banner

쉬움

성공 배너

#banner#success#javascript

Warning Banner

쉬움

경고 배너

#banner#javascript

Promo Banner

쉬움

프로모션 배너

#banner#gradient#javascript

Empty State

쉬움

빈 상태 표시

#empty#css-only

Error State

쉬움

에러 상태 표시

#error#css-only

Success State

쉬움

성공 상태 표시

#success#css-only

Loading State

쉬움

로딩 상태 표시

#loading#animation

No Results State

쉬움

검색 결과 없음 상태

#empty#css-only

Maintenance State

쉬움

유지보수 상태 표시

#css-only

Removable Chip

쉬움

삭제 가능한 칩 컴포넌트

#click#javascript#removable

Choice Chip

쉬움

단일 선택 가능한 칩 컴포넌트

#click#javascript#choice

Filter Chip

보통

다중 선택 가능한 필터 칩

#click#javascript#filter

Input Chip

보통

입력 가능한 칩 컴포넌트

#input#javascript#interactive

Avatar Chip

보통

아바타가 포함된 칩 컴포넌트

#avatar#removable#javascript

buttons.floatingActionButton.title

보통

buttons.floatingActionButton.description

#click#javascript#micro

buttons.buttonGroup.title

쉬움

buttons.buttonGroup.description

#click#javascript

buttons.segmentedControl.title

보통

buttons.segmentedControl.description

#click#javascript#smooth

cards.statCard.title

쉬움

cards.statCard.description

#gradient#ecommerce

cards.featureCard.title

쉬움

cards.featureCard.description

#hover#css-only

Fade Transition

쉬움

부드럽게 나타나고 사라지는 페이드 전환 효과

#animation#smooth#css-only

Slide Transition

쉬움

다양한 방향에서 슬라이드되는 전환 효과

#animation#smooth#interactive

Scale Transition

쉬움

크기가 변하면서 나타나는 스케일 전환 효과

#animation#smooth#interactive

Collapse Transition

보통

높이가 부드럽게 변하는 접기/펼치기 전환 효과

#animation#smooth#javascript

Masonry Grid

보통

높이가 다른 아이템들을 벽돌처럼 쌓는 그리드 레이아웃

#grid#layout#css

Infinite Scroll

보통

스크롤 시 자동으로 콘텐츠를 로드하는 무한 스크롤

#scroll#loading#pagination

Virtual Scroll

어려움

대량의 데이터를 효율적으로 렌더링하는 가상 스크롤

#scroll#performance#optimization

Parallax Scroll

보통

스크롤 시 레이어마다 다른 속도로 움직이는 패럴랙스 효과

#scroll#parallax#depth

Hover Glow

보통

마우스 위치를 따라 발광 효과가 나타나는 인터랙션

#hover#glow#mouse

Gradient Animation

쉬움

부드럽게 변하는 그라디언트 애니메이션

#gradient#animation#background

Pulse Animation

쉬움

규칙적으로 크기가 변하는 펄스 애니메이션

#animation#pulse#continuous

Shake Animation

쉬움

좌우로 흔들리는 애니메이션 효과

#animation#shake#alert

Rotate Transition

보통

회전하며 나타나고 사라지는 전환 효과

#transition#rotate#smooth

Zoom Transition

보통

확대/축소되며 나타나고 사라지는 전환 효과

#transition#zoom#scale

Ripple Effect

보통

클릭 위치에서 퍼지는 물결 효과

#effect#ripple#click#interactive