Follow Button コンポーネント
ダークテーマをサポートするダッシュボード用のNeumorphismスタイルのフォローボタン。
HTMLコード
<div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
<button class="relative inline-flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-full shadow-lg transition-transform transform hover:scale-105 active:scale-95 dark:shadow-inner shadow-gray-300 ">
<span class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-400 via-red-500 to-yellow-500 opacity-20 blur transition-all duration-500"></span>
<span class="relative text-white font-bold text-lg">
Follow
</span>
</button>
</div>関連コンポーネント
Follow Button コンポーネント - Monospace/Developer Style
ニュース/ジャーナリズムWebサイト向けに設計された複雑でインタラクティブなフォローボタンコンポーネントで、ジュエルトーンの色とダークモードのサポートを含む完全な応答性を備えたモノスペース/開発者の美学を特徴としています。
ニューモーフィックフォローボタンコンポーネント
日没/暖色系の色調を備えた複雑でニューモーフィックなスタイルのフォローボタンコンポーネントで、不動産プラットフォーム向けに設計されています。レスポンシブデザインとダークモードのサポートが特徴で、微妙な影を使用して要素を背景から押し出しているように見えます。
Follow Button コンポーネント
レトロ/ビンテージカラーパレットでデザインされた、すっきりとしたミニマリストの「フォロー」ボタンは、ダッシュボードやプロフィールページに適しています。インタラクティブなホバー状態とダークモードのサポートが特徴で、スイス/国際的なタイポグラフィの原則を体現しています。