CSSで実装するボタンデザインとホバーエフェクトのアイデア

Webデザイン

2018/03/13　 2019/10/27

様々な解像度(PC/タブレット)に対応するようCSSのみでボタンを作るのが主流となり、チュートリアルや簡単に設置できるCSSライブラリも増えてきました。今回は CSSのみで実装できるCSSボタンデザインの基本的な作り方と、CSSボタンを作る上で役立つサイトを紹介します。また、CodePenで公開されているCSSボタンのアイデアも厳選してピックアップしましたので参考にしてみてください。

目　次

基本的なCSSボタンの作り方

<a>タグでのCSSボタン
<input>タイプのCSSボタン
立体的なCSSボタン
アイコンフォントを使用したCSSボタン

CSSボタンの制作で役立つサイト

Creative Button Styles
Button Styles Inspiration
Hover.css
bttn.css
Buttons
BUTTONS
Pushy Buttons

CSSボタン制作のアイデア

Colorful CSS Buttons
Animated CSS3 Buttons
20 Button Hover Effects
Six Pure CSS Button Hover Animations
Collection of Button Hover Effects
Gradient hover animated button
Amy Winehouse Doc Button
Blobs button
Rotating Icon Buttons
Twitter Button Concept
CSS3 Social buttons vol.1
Gradient Buttons
Pressable CSS Buttons

基本的なCSSボタンの作り方

<a>タグでのCSSボタン

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

CSSボタン

html

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

CSS

.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; /*ボタン色*/
}

<input>タイプのCSSボタン

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

html

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

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ボタン

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

CSSボタン

html

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

CSS

.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);
}

アイコンフォントを使用したCSSボタン

③のボタンにアイコンフォント「FontAwesome」をテキスト文頭に配置したCSSボタン。簡単にCSSのみでデザインされたボタンを作成できます。

CSSボタン

FontAwesomeが発行しているCSSをhead内にリンクを貼ります。後は使用したいアイコンをFontAwesomeで検索して、コード<i class="fas fa-chevron-circle-right"></i>を文頭にコピペするだけです。

html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

html

<a class="button04" ><i class="fas fa-chevron-circle-right"></i> CSSボタン</a>

CSS

.button04{
	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; /*角丸*/
}
.button04:hover{
	background-color: #f9c500;/*ボタン色*/
	border-bottom: solid 6px #f39800; /*下線色*/
}
.button04:active {
	margin-top: 6px;
	border-bottom: none;
	-webkit-transform: translateY(6px);　/*下移動*/
	transform: translateY(6px);
}

FontAwesomeの使い方については↓の記事をご覧ください。