コンポーネント ボタン マテリアルデザインボタンコンポーネント

マテリアルデザインボタンコンポーネント

ソーシャルメディア用のアーストーンのマテリアルデザインボタンコンポーネント

プレビュー

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>
```

関連コンポーネント

ボタンコンポーネント

グレースケールの配色を備えたミニマリスト/フラットデザインのボタンコンポーネント。ビジネス/企業のWebサイトに適しており、一部のインタラクティブ機能を備えた適度な複雑さを備えています。レスポンシブで、Tailwind CSSを使用したダークテーマをサポートしています。

開ける

Brutalism Buttons コンポーネント

ブルータリズムデザインのボタンコンポーネントで、高彩度の色、レスポンシブレイアウト、ダークモードのサポートが特徴で、ビジネスや企業のWebサイトに適しています。

開ける

ボタンコンポーネント

ポートフォリオ用の単色配色を備えたニューモーフィズムボタンコンポーネントで、ダークテーマのサポートに応答します。

開ける