コピペで簡単に実装できる！ Tailwind CSSで実装されたボタンの最新コレクション -Tailwind CSS button collection

サイト構築 -CSS

Post on:2024年5月15日

sponsorsr

Webサイトの外観を向上させるためにデザインされた、Tailwind CSSで実装されたボタンのコレクションを紹介します。

ボタンの実装はJavaScriptは無し、Tailwind CSSで実装されたさまざまなエフェクトが用意されています。コードはコピペするだけで、簡単に実装できます。

コピペで簡単に実装できる！ Tailwind CSSで実装されたボタンの最新コレクション

Tailwind CSS button collection
Tailwind CSS button collection -GitHub

使い方は簡単、登録など面倒なことは一切不要です。
各ボタンの右上をクリックすると、Tailwind CSSのコードをコピーできます。

ボタンの右上をクリックして、コードをコピー

コードをペーストする前に、Tailwind CSSの準備をしておく必要があります。

Installation -Tailwind CSS

さまざまな方法が用意されており、開発目的で手っ取り早いのはビルド手順なしでCDNを利用する方法です。HTMLファイルに以下のタグをhead内に記述するだけで、Tailwind CSSを使用できます。

HTML

<html><head>  <script src="https://cdn.tailwindcss.com"></script></head><body></body></html>

<html>

<head>

<scriptsrc="https://cdn.tailwindcss.com"></script>

</head>

<body>

</body>

</html>

※このページだけTailwind CSSを適用しているので、リンクの下線が非表示になったりしています。

Tailwind CSSの準備が完了したら、コピーしたコードをペーストするだけで利用できます。

HTML

<button>Click me</button>

1	<buttonclass="inline-flex h-12 items-center justify-center rounded-md bg-neutral-950 px-6 font-medium text-neutral-50 transition active:scale-110 ">Clickme</button>

他のボタンもいくつか試してみました。

HTML

<button><span>Hover me</span><div><div></div></div></button>

<buttonclass="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200 transition hover:scale-110"><span>Hoverme</span><divclass="absolute inset-0 flex h-full w-full justify-center [transform:skew(-12deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-12deg)_translateX(100%)]"><divclass="relative h-full w-8 bg-white/20"></div></div></button>

コードはTailwind CSSなので、自由に変更カスタマイズできます。

HTML

<button>Hover me</button>

<buttonclass="relative z-0 h-12 rounded-full bg-blue-500 px-6 text-neutral-50 after:absolute after:left-0 after:top-0 after:-z-10 after:h-full after:w-full after:rounded-full after:bg-blue-500 hover:after:scale-x-125 hover:after:scale-y-150 hover:after:opacity-0 hover:after:transition hover:after:duration-500">Hoverme</button>

ゼロからコードを書くと大変そうなのも、コピペで簡単に利用できます。

HTML

<button><span><span>H</span><span>o</span><span>v</span><span>e</span><span>r</span><span>&nbsp;</span><span>m</span><span>e</span></span></button>

<buttonclass="group relative h-12 overflow-hidden rounded-[8px] border border-neutral-200 bg-transparent px-4 text-neutral-950"><spanclass="relative inline-flex"><spanclass="duration-700 [transition-delay:0.02s] group-hover:[transform:rotateX(360deg)]">H</span><spanclass="duration-700 [transition-delay:0.04s] group-hover:[transform:rotateX(360deg)]">o</span><spanclass="duration-700 [transition-delay:0.06s] group-hover:[transform:rotateX(360deg)]">v</span><spanclass="duration-700 [transition-delay:0.08s] group-hover:[transform:rotateX(360deg)]">e</span><spanclass="duration-700 [transition-delay:0.10s] group-hover:[transform:rotateX(360deg)]">r</span><spanclass="duration-700 [transition-delay:0.12s] group-hover:[transform:rotateX(360deg)]"> </span><spanclass="duration-700 [transition-delay:0.14s] group-hover:[transform:rotateX(360deg)]">m</span><spanclass="duration-700 [transition-delay:0.16s] group-hover:[transform:rotateX(360deg)]">e</span></span></button>

サイトには、他にもたくさんのボタンのコードが掲載されています。

Tailwind CSS button collection

Movatterモバイル変換

コピペで簡単に実装できる！ Tailwind CSSで実装されたボタンの最新コレクション -Tailwind CSS button collection

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info