実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。

今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。
対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。
また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。

CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があります。
確認の際はChromeやFirefox、IEであれば10や11といったモダンブラウザでご覧ください。

共通のHTML・CSS

一部違うものもありますが、今回はサンプルとして基本的に下記のようなシンプルなHTMLをベースに使用しているので、サンプル紹介時にHTMLの記述がない場合のHTMLはこちらを使用しています。

<a class="button" href="#">Button</a>

CSSは下記のようなスタイルをベースとして設定してありますが、ボタンサイズやbox-sizingの有無などは各自で変更をしてください。
また、サンプルでは動きをつけるためにtransitionを多用しています。
基本的に全てtransition: all .3s;という形で記述をしているので、一部に適用させたい場合はallの部分、スピードを変更したい場合は.3sとなっているところをそれぞれ任意のものに変更してください。
また、変化の具合を変更したい場合はeaseease-in-outなどの値を記述してください。

.button {
  display: inline-block;
  width: 200px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

背景カラーをふわっと変更する

ホバー時にbackground-colorで背景カラーを変更するという単純なものに、transition効果を適用したものです。
実装にはベーススタイルに下記を追記します。

.button {
  background-color: #333;
  color: #fff;
}
.button:hover {
  background-color: #59b1eb;
}

背景・ボーダー・文字カラーをふわっと変更する

ホバー時に背景だけでなくボーダーと文字のカラーも同時に変更し、transition効果を適用したものです。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
}
.button:hover {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}

背景カラーが左右に分かれていく

ホバー時に背景カラーが左右に分かれていく感じに見せる方法です。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  position: relative;
  z-index: 2;
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
}
.button:hover {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}
.button::before,
.button::after {
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #333;
}
.button::before {
  right: 0;
}
.button::after {
  left: 0;
}
.button:hover::before,
.button:hover::after {
  width: 0;
  background-color: #59b1eb;
}

背景カラーが上下に分かれていく

先ほどの背景カラーが分かれていく見栄えの上下バージョンです。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  position: relative;
  z-index: 2;
  background-color: #333;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
}
.button:hover {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}
.button::before,
.button::after {
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #333;
}
.button::before {
  top: 0;
}
.button::after {
  bottom: 0;
}
.button:hover::before,
.button:hover::after {
  height: 0;
  background-color: #59b1eb;
}

文字間隔を広げる

ホバー時にletter-spacingを使用して文字の間隔を広げるという単純なものですが、そこへtransition効果を適用することで動きを加えたものです。
実装にはベーススタイルに下記を追記します。

.button {
  background-color: #333;
  color: #fff;
}
.button:hover {
  letter-spacing: 5px;
}

背景を透過させ、ホバー時にうっすらと背景色を出す

海外のWebサイトなどでたまに見かけるスタイルで、通常時はbackground-color: transparent;を使って透過させ、ホバー時にrgba(255, 255, 255, .2);で透過された白を表示させることで、背景色をうっすらと表示させたものです。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  line-height: 50px;
}
.button:hover {
  background-color: rgba(255, 255, 255, .2);
}

ボーダースタイルを変更する

通常時にsolidで指定されているボーダースタイルを、ホバー時にdashedに変更するというものです。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
}
.button:hover {
  border-style: dashed;
}

内側にブロックを表示する

ホバー時にボタンの内側にひと回り小さいブロックをふわっと表示させるものです。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 48px;
}
.button::after {
  top: 4px;
  left: 4px;
  width: 188px;
  height: 42px;
  border: 2px solid #333;
  opacity: 0;
}
.button:hover::after {
  opacity: 1;
}

上から背景がするっと降りてくる

ホバー時に上から背景がするっと降りてくるものです。
サンプルでは上からのパターンですが、一部内容を変更・追記すれば他のパターンにも変更できます。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button:hover {
  color: #fff;
}
.button::after {
  top: -100%;
  width: 100%;
  height: 100%;
}
.button:hover::after {
  top: 0;
  background-color: #333;
}

サンプルでは上からのパターンですが、先述したように.button::after.button:hover::afterの記述内容を一部変更・追記することで他のパターンにも簡単に変更できます。
例えば、左から背景が表示されるようなものにしたい場合は.button::aftertop: -100%;の箇所をtop: 0;に変更してleft: -100%;を追記、次に.button:hover::aftertop: 0;の箇所をleft: 0;に変更をします。

左上から背景がするっと降りてくる

先ほどのエフェクト紹介部分で左から出てくるようにするなどの別パターンも可能と書きましたが、こちらも基本的な動きは同じ感じで、少し追記をすることでホバー時に左上(斜め)から背景がするっと降りてくるようにしたものです。

サンプルでは左上からのパターンですが、同じく一部内容を変更・追記すれば左上からとか右下からといった他のパターンにも変更できます。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button:hover {
  color: #fff;
}
.button::after {
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
}
.button:hover::after {
  top: 0;
  left: 0;
  background-color: #333;
}

奥から背景をふわっと表示させる #1

ホバー時に奥から手前へ背景をふわっと表示させる方法です。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button:hover {
  color: #fff;
}
.button::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.button:hover::after {
  background: #333;
  -webkit-transform: scale(1);
  transform: scale(1);
}

奥から背景をふわっと表示させる #2

基本的には先ほどのホバー時に奥から手前へ背景をふわっと表示させるものですが、そこに回転する動きを加えたものです。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button:hover {
  color: #fff;
}
.button::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.button:hover::after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  background: #333;
}

上からパタッと要素が落ちてくる

上手く説明できないので実際に動きを見てほしいのですが、ホバー時に上から要素がパタッとボタンにフタをするような感じで降りてくるものです。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  position: relative;
  z-index: 2;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  -webkit-perspective: 300px;
  perspective: 300px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.button:hover {
  color: #fff;
}
.button::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  opacity: 0;
}
.button:hover::after {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  opacity: 1;
}

要素がパタッと開く

こちらも先ほどと同様に上手く説明できないので実際に動きを見てほしいのですが、ホバー時にパタッとフタが開くような感じにするものです。
実装にはベーススタイルに下記を追記・一部変更します。

.button {
  position: relative;
  z-index: 2;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
  -webkit-perspective: 300px;
  perspective: 300px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.button:hover {
  color: #333;
}
.button::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
}
.button:hover::after {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}

キューブ状にクルッと回転する

パッと見は普通のボタンですが、ホバー時にキューブ状にクルッと回転するようになっています。
実装する際はHTMLを下記のものに変更し、CSSはベーススタイルに下記を追記・一部変更します。

このサンプルでは文言変更のしやすさなどを考えaの中にspanを追記して実装していますが、やろうと思えば属性セレクタや擬似要素を使用することで今までと同様のシンプルなHTMLで実装することもできます。

<a class="button" href="#"><span>Hover</span><span>Button</span></a>
.button {
  position: relative;
  -webkit-perspective: 300px;
  perspective: 300px;
}
.button span {
  display: block;
  position: absolute;
  width: 200px;
  height: 60px;
  border: 2px solid #333;
  text-align: center;
  line-height: 56px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  pointer-events: none;
}
.button span:nth-child(1) {
  background-color: #333;
  color: #fff;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}
.button span:nth-child(2) {
  background-color: #fff;
  color: #333;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}
.button:hover span:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.button:hover span:nth-child(2) {
  background-color: #333;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

CSSのみでボタンデザイン #1

CSSのみで下記のようなタイプのボタンを作成する方法です。

  • フラットデザインで少し立体的にする
  • ホバー時に少し背景色を明るくする
  • ボタンを押したことがわかりやすいようにする

実装にはベーススタイルに下記を追記・一部変更し、transition部分はベーススタイルに設定されているものを無効化している記述になるので、transitionを使用していない要素へ適用する場合は記述する必要はありません。

.button {
  position: relative;
  background-color: #1abc9c;
  border-radius: 4px;
  color: #fff;
  line-height: 52px;
  -webkit-transition: none;
  transition: none;
  box-shadow: 0 3px 0 #0e8c73;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.button:hover {
  background-color: #31c8aa;
  box-shadow: 0 3px 0 #23a188;
}
.button:active {
  top: 3px;
  box-shadow: none;
}

CSSのみでボタンデザイン #2

CSSのみで下記のようなタイプのボタンを作成する方法です。

  • フラットデザインで少し立体的にする
  • ホバー時にボタンが少し浮き出す感じにする
  • ボタンを押したことがわかりやすいようにする

実装にはベーススタイルに下記を追記・一部変更し、transition部分はベーススタイルに設定されているものを無効化している記述になるので、transitionを使用していない要素へ適用する場合は記述する必要はありません。

.button {
  position: relative;
  background-color: #f7d034;
  border-radius: 4px;
  color: #fff;
  line-height: 52px;
  -webkit-transition: none;
  transition: none;
  box-shadow: 0 3px 0 #f7ba59;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.button:hover {
  top: -4px;
  box-shadow: 0 7px 0 #f7ba59;
}
.button:active {
  top: 3px;
  box-shadow: none;
}

CSSのみでボタンデザイン #3

CSSのみで下記のようなタイプのボタンを作成する方法です。

  • 背景はグラデーションを使う
  • ホバー時に少し背景色を暗めにする
  • ボタンを押したことがわかりやすいようにする

実装にはベーススタイルに下記を追記・一部変更し、transition部分はベーススタイルに設定されているものを無効化している記述になるので、transitionを使用していない要素へ適用する場合は記述する必要はありません。

.button {
  border: 1px solid #15aeec;
  background-color: #49c0f0;
  background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
  background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);
  border-radius: 4px;
  color: #fff;
  line-height: 50px;
  -webkit-transition: none;
  transition: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.button:hover {
  border:1px solid #1090c3;
  background-color: #1ab0ec;
  background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
  background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}
.button:active {
  background: #1a92c2;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
  color: #1679a1;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}

CSSのみでボタンデザイン #4

CSSのみで下記のようなタイプのボタンを作成する方法です。

  • 背景はグラデーションを使う
  • 擬似要素を使用して内側にボーダーを入れて立体感をだす
  • ボタンを押したことがわかりやすいようにする

実装にはベーススタイルに下記を追記・一部変更し、transition部分はベーススタイルに設定されているものを無効化している記述になるので、transitionを使用していない要素へ適用する場合は記述する必要はありません。

.button {
  position: relative;
  border-radius: 4px;
  color: #fff;
  line-height: 50px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: none;
  transition: none;
  text-shadow: 0px 1px 0px #f56778;
}
.button,
.button:hover {
  border-bottom: 4px solid #cb5462;
  background-color: #f56778;
  background-image: -webkit-linear-gradient(top, #f997b0, #f56778);
  background-image: linear-gradient(to bottom, #f997b0, #f56778);
  box-shadow: inset 1px 1px 0 #fbc1d0;
}
.button::before,
.button::after {
  bottom: -1px;
  left: -1px;
  width: 200px;
  height: 50px;
  border: 1px solid #ee8090;
  border-bottom: 1px solid #b84d5a;
  border-radius: 4px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: none;
  transition: none;
}
.button::before {
  height: 48px;
  bottom: -4px;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 1px 0px #bfbfbf;
}
.button:hover {
  background: #f56778;
  background-image: -webkit-linear-gradient(top, #f56778, #f997b0);
  background-image: linear-gradient(to bottom, #f56778, #f997b0);
  color: #913944;
  text-shadow: 0px 1px 0px #f9a0ad;
}
.button:active {
  bottom: -4px;
  margin-bottom: 4px;
  border: none;
  box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.button:active::before,
.button:active::after {
  border: none;
  box-shadow: none;
}

CSSのみでボタンデザイン #5

半透明なボタンをCSSのみで実装する方法です。
実装にはベーススタイルに下記を追記します。

.button {
  background-color: rgba(255, 255, 255, .2);
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7);
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);
}
.button:hover {
  background-color: rgba(255, 255, 255, .3);
}

参考サイト

以下エントリーでも様々なデザインやホバーエフェクトを実装する方法が紹介されています。
紹介している中にはテキストリンクなどのボタン以外のパーツに実装しているものもあったり画像やスクリプトを使っているものも一部ありますが、アニメーションや擬似要素の使い方などの部分は参考になると思いますし、基本的に動きの部分に関してはtransitionanimationなどのCSSで実装しているものです。

Simple Icon Hover Effects | Codrops

Simple Icon Hover Effects | Codrops

様々なホバーエフェクトが紹介されているエントリーで、全17種類のパターンがあります。
タイトルに書いてあるようにアイコンとの相性が良いですが、テキストだけのボタンなどでも使用できます。

Creative Button Styles | Codrops

Creative Button Styles | Codrops

シンプルなものから3D風なものまで様々なホバーエフェクトが紹介されており、今回まとめたこのエントリーもここで紹介されているのを参考にしたものが数多くあります。

Animated Buttons with CSS3 | Codrops

Animated Buttons with CSS3 | Codrops

CSS Buttons with Pseudo-elements | Codrops

CSS Buttons with Pseudo-elements | Codrops

Creative Link Effects | Codrops

Creative Link Effects | Codrops

こちらは上の4つとは違ってボタンではなくテキストに相性が良さそうなリンクエフェクトですが、一部ボタンっぽいものもありますし、面白い動きを実装したものが多いです。

CSS3で作るシンプルなマウスオーバーアニメーション5種 | webOpixel

CSS3で作るシンプルなマウスオーバーアニメーション5種 | webOpixel

要素の拡大・縮小や回転など、CSSのみで実装するアニメーションを5種類紹介しています。

ワンポイントに使えるCSS3マウスオーバーアニメーション5種 | webOpixel

ワンポイントに使えるCSS3マウスオーバーアニメーション5種 | webOpixel

同じくCSSのみでアニメーションを実装したもので、要素をぶるぶると振動させたり、ホバー時にアイコンを移動させながら拡大表示するなど5種類紹介しています。

12 fancy buttons

12 fancy buttons

12種類のホバーエフェクトがまとめられており、キューブ状の要素が分割されたものやグリッチ風のアニメーションを取り入れたものなど、他では見かけないものが幾つかあります。

40 CSS3 Animated Button Tutorials And Experiments | SmashingApps.com

40 CSS3 Animated Button Tutorials And Experiments | SmashingApps.com

CSSで実装したボタンデザインやアニメーションのチュートリアルをまとめたエントリー。

40 CSS3 Button Tutorials For Designers | Hongkiat.com

40 CSS3 Button Tutorials For Designers | Hongkiat.com

同じくCSSで実装したボタンのチュートリアルをまとめたエントリー。

Sassy Buttons

Sassy Buttons

CSS3 patterned buttons

CSS3 patterned buttons

ジェネレータ

以下はいずれもCSSのみでボタンをデザインする際に便利なジェネレータツールです。
どのツールも特に難しいことなく簡単に操作でき、中には予め何パターンかのデザインが用意されているものもあるので、それらをベースに自分好みに変更することなどもできます。
ノンプログラマや普段からジェネレータを多用しているという人は、ひと通り試して自分が使いやすいと思うものを見つけてみてください。