制作の時短に！コピペだけで使えるボタン用CSS集

おはようございます。社員Aです👩

今回はちょっとしたときにコピペだけでおしゃれなボタンが作れるCSS配布サイトをご紹介します。

「ボタンを設置する予定はなかったけど急遽必要になった…」「1から組むのは面倒…」そんなときに活用できます。

CSS Scan

84種類ものボタンデザインが公開されているサイトです。

ボタンをクリックすると、瞬時に「HTML」「CSS」がコピーされるので

そのまま使用したい部分に差し込むだけで使用できるのが手軽です。

getcssscan.com

 

7 Users

196 Pockets

Beautiful CSS buttons examples - CSS Scan

https://getcssscan.com/css-buttons-examples

🎨 Curated collection of 84 free beautiful CSS buttons, ready-to-use for your next projects. Click to copy.

CSS ANIMO

アニメーション効果の付いたボタンデザインが配布されています。

ローディングにも使えそうなデザインも多数あり、クリックするとCSSがコピーされます。

色やサイズ感などはサイトに合わせてカスタマイズしてみると良さそうです！

cssanimo.netlify.app

 

1 Tweet

62 Users

126 Pockets

CSS Animo

https://cssanimo.netlify.app

CSS Animations

TailwindCSS Buttons

全体的に洗練されたボタンデザインが多い印象です。

ダークモードの際にも使いやすいデザインも配布されており、マルチに使用できます。

DevDojo

 

5 Users

94 Pockets

TailwindCSS Buttons

https://devdojo.com/tailwindcss/buttons#_

A unique collection of Copy & Paste TailwindCSS buttons

Gradient Button Hover

ぱっと目を引くグラデーションデザインのボタンが11種類。

LPなどにも活用できそうです。

Micro Interaction Button

hoverで矢印がアニメーションするボタンです。

ユーザビリティの向上にも繋がりそうです。

Cool buttons

動きも一つ一つ異なるボタンデザインです。

洗練された印象を与えてくれますね！