aタグをブロック要素にしたシンプルなCSSボタンのデザイン例。マウスオーバー:hoverでボタンの背景色を変化させ、変移をスムーズ(なめらか)にアニメーションさせるようにtransitionを設定しました。

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

.button01{
	display:block;
	width: 250px;
	height:70px;
	line-height: 70px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	background-color: #f39800; /*ボタン色*/
	border-radius: 5px; /*角丸*/
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
.button01:hover{
	background-color: #f9c500; /*ボタン色*/
}

フォームで使われるボタンsubmitbuttonのCSSも大体同じ設定。フォームのボタンはボーダーが残るのでborder: none;としてボーダーを消します。

<input type="submit" class="button02" value="CSSボタン">

.button02{
	display:block;
	width: 250px;
	height:70px;
	line-height: 70px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	background-color: #f39800; /*ボタン色*/
	border-radius: 5px; /*角丸*/
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
.button02:hover{
	background-color: #f9c500; /*ボタン色*/
}

よくみられるフラットでありながら立体感のあるCSSボタン。クリック(ボタンを押しこむ):active表現を加えたデザイン。

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

.button03{
	display:block;
	width: 250px;
	height:70px;
	line-height: 70px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	background-color: #f39800; /*ボタン色*/
	border-bottom: solid 6px #ec6c00; /*下線色*/
	border-radius: 5px; /*角丸*/
}
.button03:hover{
	background-color: #f9c500;/*ボタン色*/
	border-bottom: solid 6px #f39800; /*下線色*/
}
.button03:active {
	margin-top: 6px;
	border-bottom: none;
	-webkit-transform: translateY(6px);　/*下移動*/
	transform: translateY(6px);
}

codropsで公開されている、モダンなCSSボタンのアイデア。2013年に公開された記事ですが、今なおキレイなボタン・ホバーエフェクトが多い。

こちらもcodropsで公開されているボタンスタイルのチュートリアル。テキストエフェクトやアイコンをうまく利用した魅力的なホバーエフェクトが多い。

CSSボタンに手軽にhoverエフェクトを実装することができる有名なCSSライブラリ。ライセンスはMIT。

13種類・4サイズから選択できるCSSライブラリ。

フラットタイプから立体的なボタンまで揃ったCSSライブラリ。

6タイプ・6色のフラットから立体的なボタンまで設置できるライブラリ。Font Awesomeを読み込むことでアイコン付きボタンも比較的簡単に設置できます。

4サイズ・3色の立体的なシンプルなCSSボタンを設置できるライブラリ。

ボーダーをうまく使用したカラフルなCSSボタン

See the Pen Colorful CSS Buttons by Chris Deacy (@chrisdothtml) on CodePen.

ラインやストライプを使った16種類のCSSボタン

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

ベーシックなものからフラップ・シャドーまで実用的なスタイルのCSSボタン

See the Pen 20 Button Hover Effects by Rosa (@RRoberts) on CodePen.

ボーダーと背景を入れ替えるアニメーションのCSSボタン

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

ホバーエフェクトに工夫を凝らしたCSSボタン

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

アウトラインがアンダーラインに変化するキレイなCSSボタン

See the Pen Gradient hover animated button | Welcome in my world by Marcel Pirnay (@mars2601) on CodePen.

ブロックが左右にスライドするクールなCSSボタン

See the Pen Amy Winehouse Doc Button by Eric Grucza (@egrucza) on CodePen.

液状の背景が浮き上がっていくポップなCSSボタン

See the Pen Blobs button by Nikolay Talanov (@suez) on CodePen.

45度回転するアイコンを使用した印象的なCSSボタン

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

立体的にフォローボタンを出現させるアイデア

See the Pen Twitter Button Concept by Erik Deiner by fatihmusal (@fatihmusal) on CodePen.

5タイプのバリエーションのホバーエフェクトのアイデア

See the Pen CSS3 Social buttons vol.1 by fox_hover (@fox_hover) on CodePen.

グラデーションに変化をつけたホバーエフェクトのアイデア

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

立体感のある様々な形状のCSSボタン

See the Pen Pressable CSS Buttons by Joshua Hibbert (@joshnh) on CodePen.