구성 요소 단추 Material Design Buttons 구성 요소

Material Design Buttons 구성 요소

소셜 미디어용 Earth Tones의 Material Design Buttons 구성 요소

미리 보기

HTML 코드

```html
<div class="flex flex-col items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="flex space-x-4 rtl:space-x-reverse">
    <button class="px-4 py-2 bg-amber-600 text-white dark:bg-amber-700 dark:text-stone-200 rounded-md shadow-md hover:bg-amber-700 dark:hover:bg-amber-800 transition duration-300 ease-in-out">Like</button>
    <button class="px-4 py-2 bg-stone-400 text-stone-800 dark:bg-stone-600 dark:text-stone-200 rounded-md shadow-md hover:bg-stone-500 dark:hover:bg-stone-700 transition duration-300 ease-in-out">Comment</button>
    <button class="px-4 py-2 bg-green-600 text-white dark:bg-green-700 dark:text-stone-200 rounded-md shadow-md hover:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out">Share</button>
  </div>
</div>
```

관련 구성 요소

Buttons 구성 요소

포트폴리오를 위한 그레이스케일 색 구성표의 Material Design 스타일 버튼으로, 어두운 테마를 지원하는 반응형 디자인이 특징입니다.

열다

Buttons 구성 요소

Skeuomorphism Analogous Complex Dashboard Buttons 반응형 디자인과 어두운 테마를 지원하는 구성 요소.

열다

Brutalism Buttons 구성 요소

브루탈리즘 디자인의 버튼 구성 요소로, 채도가 높은 색상, 반응형 레이아웃 및 다크 모드 지원을 특징으로 하며 비즈니스 및 기업 웹 사이트에 적합합니다.

열다