コピペで簡単に実装できる！ Tailwind CSSで実装されたボタンの最新コレクション -Tailwind CSS button collection
Post on:2024年5月15日
sponsors
Webサイトの外観を向上させるためにデザインされた、Tailwind CSSで実装されたボタンのコレクションを紹介します。
ボタンの実装はJavaScriptは無し、Tailwind CSSで実装されたさまざまなエフェクトが用意されています。コードはコピペするだけで、簡単に実装できます。
Tailwind CSS button collection
Tailwind CSS button collection -GitHub
使い方は簡単、登録など面倒なことは一切不要です。
各ボタンの右上をクリックすると、Tailwind CSSのコードをコピーできます。
ボタンの右上をクリックして、コードをコピー
コードをペーストする前に、Tailwind CSSの準備をしておく必要があります。
さまざまな方法が用意されており、開発目的で手っ取り早いのはビルド手順なしでCDNを利用する方法です。HTMLファイルに以下のタグをhead内に記述するだけで、Tailwind CSSを使用できます。
|
1 2 3 4 5 6 7 8 |
<html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body> </body> </html> |
※このページだけTailwind CSSを適用しているので、リンクの下線が非表示になったりしています。
Tailwind CSSの準備が完了したら、コピーしたコードをペーストするだけで利用できます。
|
1 |
<button class="inline-flex h-12 items-center justify-center rounded-md bg-neutral-950 px-6 font-medium text-neutral-50 transition active:scale-110 ">Click me</button> |
他のボタンもいくつか試してみました。
|
1 |
<button class="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>Hover me</span><div class="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%)]"><div class="relative h-full w-8 bg-white/20"></div></div></button> |
コードはTailwind CSSなので、自由に変更カスタマイズできます。
|
1 |
<button class="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">Hover me</button> |
ゼロからコードを書くと大変そうなのも、コピペで簡単に利用できます。
|
1 |
<button class="group relative h-12 overflow-hidden rounded-[8px] border border-neutral-200 bg-transparent px-4 text-neutral-950"><span class="relative inline-flex"><span class="duration-700 [transition-delay:0.02s] group-hover:[transform:rotateX(360deg)]">H</span><span class="duration-700 [transition-delay:0.04s] group-hover:[transform:rotateX(360deg)]">o</span><span class="duration-700 [transition-delay:0.06s] group-hover:[transform:rotateX(360deg)]">v</span><span class="duration-700 [transition-delay:0.08s] group-hover:[transform:rotateX(360deg)]">e</span><span class="duration-700 [transition-delay:0.10s] group-hover:[transform:rotateX(360deg)]">r</span><span class="duration-700 [transition-delay:0.12s] group-hover:[transform:rotateX(360deg)]"> </span><span class="duration-700 [transition-delay:0.14s] group-hover:[transform:rotateX(360deg)]">m</span><span class="duration-700 [transition-delay:0.16s] group-hover:[transform:rotateX(360deg)]">e</span></span></button> |
サイトには、他にもたくさんのボタンのコードが掲載されています。
Tailwind CSS button collection
Tailwind CSS button collection
Tailwind CSS button collection
Tailwind CSS button collection
sponsors
