CCHub Logo CCHub Tailwind Collection
コンポーネント ボタン ニューモーフィズムソーシャルメディアボタン

ニューモーフィズムソーシャルメディアボタン

ソーシャルメディアインターフェイス用のシンプルなNeumorphismスタイルのボタンコンポーネントで、レスポンシブデザインとTailwind CSSを使用したダークモードのサポートを特長としています。このボタンは、類似の配色と微妙な影を使用して、柔らかく押し出された外観を作り出します。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-800">
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover">
    Like
  </button>
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover">
    Share
  </button>
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover-analogous dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover-analogous">
    Comment
  </button>
</div>

<style>
@media (prefers-color-scheme: light) {
  .shadow-neumorphism-light {
    box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
  }
  .hover\:shadow-neumorphism-light-hover:hover {
    box-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
  }
    .hover\:shadow-neumorphism-light-hover-analogous:hover {
    box-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffeead;
  }
}

@media (prefers-color-scheme: dark) {
  .shadow-neumorphism-dark {
    box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
  }
  .hover\:shadow-neumorphism-dark-hover:hover {
    box-shadow: 2px 2px 5px #4a4a4a, -2px -2px 5px #363636;
  }
    .hover\:shadow-neumorphism-dark-hover-analogous:hover {
    box-shadow: 2px 2px 5px #4a4a4a, -2px -2px 5px #808000;
  }
}
</style>

関連コンポーネント

ボタンコンポーネント

補色の配色を使用した、さまざまなアクションに対応するミニマリストでフラットなデザインのボタンのコレクション。ダークモードのサポートにより完全にレスポンシブ。

開ける

アールデコ調の不動産ボタンコンポーネント

アールデコ調の複雑な不動産プラットフォーム用ボタンコンポーネントで、幾何学模様、豪華なグレースケールスタイル、複数のインタラクティブ要素を備え、完全な応答性とダークモードをサポートしています。

開ける

アールデコネオンボタン

アールデコ調の幾何学的なスタイルと鮮やかなネオン/エレクトリックカラースキームを備えたシンプルで応答性の高いボタンコンポーネントは、ヘルスケアアプリケーションに適しています。ダークモードのサポートが含まれています。

開ける