CSSボタンのオシャレなデザインとエフェクトまとめ

CSSとHTMLだけで実現できるCSSボタンのデザインとhoverエフェクトのサンプルです。 HTMLとCSSをコピペするだけでブログやホームページに実装できるので、気に入ったのがあれば試してみて下さい。

またボタンのデザインだけでなく、マウスをボタンに重ねた時のhoverエフェクトも中々面白いアニメーションをするので、ぜひwebサイトに合うものを見つけてみて下さいね!

CSSボタンのデザインとエフェクト一覧

HTML・CSSをコピペするだけで簡単に再現できる、CSSボタンのデザインとエフェクト一覧です。 codepenから特に優れているCSSボタンのみを厳選して紹介しています。

また掲載しているCSSボタンにはhoverエフェクトが設定してあり、実際にマウスを合わせるとアニメーションしますのでお試しください。

Buttons hover effects

まるで手書きのようなデザインのCSSボタン。 hoverエフェクトも美しく、ブログなどには取り入れやすいデザインとなっている。

See the Pen Buttons css hover effect by deineko (@deineko) on CodePen.

Sliding Button CSS

マウスホバーでボタンが移動するユニークなデザイン。 使いどころは色々ありそう。

See the Pen Sliding Button CSS by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

Code Buttons

マウスホバーで、ボタンの中の文字が全て表示されたり、背景が変わったりするCSSボタン。 コードを表示するボタンにはちょうど良さそう。

See the Pen Code Buttons by Simon Goellner (@simeydotme) on CodePen.

Floating social icon buttons | CSS Only

マウスhoverでサイドに隠れたボタンが現れる、動きのあるCSSボタン。 デザイン的にはSNSなどのボタンにピッタリそうだが、通常のメニューなどにも使えそう。

See the Pen Floating social icon buttons | CSS Only by Håvard Brynjulfsen (@havardob) on CodePen.

Button Hover States

hoverでボタンの枠が変わったり、背景が切替わったり、拡大されたりする動きのあるCSSボタン。 シンプルでオシャレなデザインなので、色々なサイトで使える。

See the Pen Button Hover States by James Power (@thejamespower) on CodePen.

Imperfect Buttons

手書き風で浮いたように見えるデザインのCSSボタン。 ボタンにマウスを乗せると着地したように見える。

See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.

Animated CSS3 Buttons

透明・ストライプ・色ありの背景が閉じたり開いたりするアニメーションのCSSボタン。 ログインボタンなどのデザインに便利。

See the Pen Animated CSS3 Buttons by Sazzad (@sazzad) on CodePen.

Button Hover Effects

13種類のマウスホバーエフェクト。 hoverで背景が円状・上下左右など、様々なアニメーションでボタンのデザインが切替わる。

See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.

Transitional Buttons

シンプルでオシャレデザインのCSSボタン。 2パターンの素早い切り替わりが綺麗。

See the Pen Transitional Buttons by Vitaliy (@kavendish) on CodePen.

Off-registration button

紙に印刷されているようなデザインのCSSボタン。 フラットスタイルが素晴らしい。

See the Pen Off-registration button by Toshiyuki TAKAHASHI (@gau) on CodePen.

CSS3 Button Examples

ネットショップをしているなら実装してみたくなるようなアニメーションボタン。 ボタンをホバーで価格が表示されるなど、動きが面白い!

See the Pen CSS3 Button Examples by Volusion Services (@volusion) on CodePen.

CSS BUTTONS!!

シンプルな6種類のCSSボタンデザイン。 それぞれデザインとホバーでのエフェクトが異なる。

See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen.

Rotating Icon Buttons

検索・設定・リロードなどのアイコンボタン。 可愛いデザインで、マウスホバーで色が変化し、クルッと右回りする。

See the Pen Rotating Icon Buttons by Cole Waldrip (@colewaldrip) on CodePen.

Gradient Buttons with Background-Color Change (CSS-only)

グラデーションが美しいCSSボタン。 微妙なグラデーションの切り替わりが本当に綺麗。

See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.

Buttons

フラットスタイルから高級感のあるデザインまで用意されている6パターンのCSSボタン。 オシャレで高級感のあるサイトなどにはピッタリかも。

See the Pen Buttons by Jeff Ballweg (@jeffballweg) on CodePen.

Fancy Buttons with Amazing Hover Effects

スタイルを崩したようなデザインのCSSボタン。

See the Pen Fancy Buttons with Amazing Hover Effects by ahmed beheiry (@ahmedbeheiry) on CodePen.

Six Pure CSS Button Hover Animations

使いやすいフラットデザインのCSSボタン。 シンプルでオシャレだから、どんなデザインのサイトでも使いやすい。

See the Pen Six Pure CSS Button Hover Animations by Christian (@CTNieves) on CodePen.

Three Simple CSS Button Hover Effects

動きが激しいCSSボタン。 シンプルなデザインでありながら、マウスホバーで大胆に動くから面白い!

See the Pen Three Simple CSS Button Hover Effects by Dronca Raul (@rauldronca) on CodePen.

Some Button Styles

どこでも使いやすい10パターンのボタンデザイン。 汎用的なボタンなので、サイトのデザインに関係なく使いやすいです。

See the Pen Some Button Styles by Blake Tarter (@blaketarter) on CodePen.

CSS3 Button Background

ポップで可愛いデザインのCSSボタン。 見た目だけでなく、ふわふわしたような動きがあったり、拡大されたりする。

See the Pen CSS3 Button Background by Tony Gaisser (@tgaisser) on CodePen.

Collection of Button Hover Effects

css3だけで表現できる実用的な5種類のボタン。

See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.

まとめ

以上、オシャレでユニークなデザインのCSSボタンでした。 一部jsが必要なものがありましたが、それ以外はすべてhtml・CSSをコピペするだけで今すぐ実装可能です。

また今回のサンプルでは、コードを見ながらボタンサンプルを確認できるので、様々なテクニックを確認しつつ試してみて下さいね。