動きのある、あるいは面白い、可愛いなど様々なお薦めのCSSボタンをまとめてみました。 関連:使える!CSSアニメーション 20選

動きがシャープなStylish Social Buttons

マウスオーバー時の背景の動きがシャープです。

送信完了が分かりやすいSend button with a transition

クリックして送信完了するまでの過程が分かりやすいです。

視覚をさらにプッシュするMaterial Button Hover

マウスオーバーでさらに視覚に対してプッシュしてくれます。

広がるメニューAnimated Material Design Button

マウスオーバーでメニューが広がります。

tの文字にも注目Twitter Button Concept

遊び心があるボタンです。

隠しボタンHidden door twitter button

ツイッターフォローボタンで動きを付けたい時にオススメです。

立体的なボタンSquishy Toggle Buttons

CSSだけでの表現でこんなボタンも。

クールなDribble Button CSS Rebound

クールなデザインに合いそうな立体的なボタンです。

変化するハンバーガーメニューSVG CSS3 Menu / Burger Button

動きがスタイリッシュなハンバーガーメニューです。

手書き風なボタンImperfect Buttons

手書き感を感じさせるボタンです。

弾ける様が可愛いBubbly Button

ボタンクリック後の様が可愛いです。

オンオフの表現がいいボタンA bunch of funky CSS3 Toggle Buttons

変化がおもしろトグルボタンです。

影を使ったボタン3D Paper button effects

マウスオーバー時の様々な影のパターンが用意されています。

完了までが分かりやすいSubmit button

これもボタンクリックから完了するまでの過程が分かりやすいです。

様々なホバーアニメーションボタンButton Hover Effects

わりと見かけそうなホバーアニメーションボタンです。

お気に入りボタンCSS Favourite Button

ボタンの説明が表示されつつ、クリック完了までの過程がわかるお気に入りボタンです。

おしゃれなデザインに活かせるAnimated Gradient Ghost Button Concept

綺麗なグラデのボタンで時間ととともに変化します。

回転するボタンRotating Icon Buttons

動きがあります。

動きのある検索ボタンExpanding text box/button

これも動きがある検索ボタンです。

様々なトグルボタンPure CSS toggle buttons

iOSのようなトグルボタンなどがあります。

カスタマイズできて遊べるボタンLiquid Button

「Open Controlles」をクリックしてカスタマイズでき、ユーザーの興味を引きつけることができます。

ゲームで使われていそうなAtom Button

何かのゲームで見たようなボタンです。

まるで生き物!Gooey radio buttons

クリック後の動きがまるで生き物のようなラジオボタンです。

アニメーションするハンバーガーメニューNavicon Transformicons

いくつかのアニメーションハンバーガーメニューが用意されています。

サブミットからのローディングボタンLadda

ボタンクリック後にボタンがローディングに変化します。 関連記事

あわせて読みたい記事