CSSで作る汎用性の高いシンプルなボタンデザイン20

ボタンデザイン_css

HTMLとCSSでつくる、汎用性の高いシンプルなボタンデザインをまとめました。

ボタンデザインにあたって、意識したポイントは3つです。

  • UXを追求する
  • アニメーションは誇張しすぎず、必要最低限に抑える
  • シンプルさの中に個性を見出す

ユーザーにとって親しみやすく、Webサイトに自然と溶け込むような優しいデザインを心がけました。

ボタンデザインの参考にしていただけたら幸いです。

この記事には広告を含む場合があります。

記事内で紹介する商品やサービスの購入・申し込みによって、当サイトに売り上げの一部が還元されます。

よくみるホバーエフェクト

明るく

Button

ふわっと明るくなります

透明度
ホバー時にopacityで透明度をコントロールしています。値が1だと100%、0に近くなるほど透明度が高くなります。

HTML

<a href="#" class="simple_square_btn5">Button</a>
CSS

.simple_square_btn5 {	display: block;	position: relative;	width: 160px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #fff;	background: #795548;
}
.simple_square_btn5:hover { opacity:0.8; cursor: pointer; text-decoration: none;
}

暗く

Button

ホバー時に暗めの色を設定

HTML

<a href="#" class="simple_square_btn7">Button</a>
CSS

.simple_square_btn7 {	display: block;	position: relative;	width: 160px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #fff;	background: #795548;
}
.simple_square_btn7:hover { cursor: pointer; text-decoration: none;	background:#673931;
}

反転

Button

背景色と文字色をホバー前後で入れ替えて、ボタンの色を反転させます

HTML

<a href="#" class="simple_square_btn2">Button</a>
CSS

.simple_square_btn2 {	display: block;	position: relative;	width: 160px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #1B1B1B;	background: #fff;	border:1px solid #1B1B1B;
}
.simple_square_btn2:hover { background: #1B1B1B; color: #fff; cursor: pointer; text-decoration: none;
}

背景が浮き出す

Button

背景色とボタンカラーを合わせて、マウスオーバーで浮き上がらせます

HTML

<a href="#" class="skelton_btn">Button</a>
CSS

.skelton_btn {	display: block;	position: relative;	width: 160px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #1B1B1B;	background: #fff;	border:1px solid #fff;
}
.skelton_btn:hover { background: #F2F2F2; cursor: pointer; text-decoration: none;
}

文字のみ

Button

マウスオーバーで文字がふわっと濃くなります

HTML

<a href="#" class="word_btn">Button</a>
CSS

.word_btn {	display: block;	position: relative;	width: 80px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #818181;
}
.word_btn:hover { color: #1B1B1B; cursor: pointer; text-decoration: none;
}

下線を使ったエフェクト

フェードイン

Button Design

下線が下からフェードインします

擬似要素とエフェクト
擬似要素::afterで下線を設定しています。visivilityをホバー前後でhiddenからvisibleにして、スッとフェードインするかのようなエフェクトを表現。

HTML

<a href="#" class="border_bottom_btn">Button</a>
CSS

.border_bottom_btn { position: relative; display: inline-block; color: #1B1B1B; text-decoration: none;
}
.border_bottom_btn:hover { cursor: pointer; text-decoration: none;
}
.border_bottom_btn::after { position: absolute; bottom: -8px; left: 0; content: ''; width: 100%; height: 2px; background: #333; opacity: 0; visibility: hidden; transition: .3s;
}
.border_bottom_btn:hover::after { bottom: -4px; opacity: 1; visibility: visible;
}

左から右へスライドイン

Button Design

下線が左から右へスライドイン

HTML

<a href="#" class="border_slide_btn">Button</a>
CSS

.border_slide_btn { position: relative; display: inline-block; color: #1B1B1B; text-decoration: none;
}
.border_slide_btn:hover { cursor: pointer; text-decoration: none;
}
.border_slide_btn::after { position: absolute; bottom: -4px; left: 0; content: ''; width: 100%; height: 2px; background: #333; transform: scale(0, 1); transform-origin: right top; transition: transform .3s;
}
.border_slide_btn:hover::after { transform-origin: left top; transform: scale(1, 1);
}

下線が広がる

Button Design

マウスオーバーで下線が広がります

HTML

<a href="#" class="border_spread_btn">Button</a>
CSS

.border_spread_btn { position: relative; display: inline-block; color: #1B1B1B; text-decoration: none;
}
.border_spread_btn:hover { cursor: pointer; text-decoration: none;
}
.border_spread_btn::after { position: absolute; bottom: -4px; left: 0; content: ''; width: 100%; height: 2px; background: #333; transform: scale(0.5, 1); transform-origin: center top; transition: transform .3s;
}
.border_spread_btn:hover::after { transform: scale(1, 1);
}

押し込むボタン

ぬるっと凹む

Button

ぬるっと凹みます

立体感
border-bottomで下線を設定、少し暗めにすることで立体感を演出しています。ホバー時はnoneに。

HTML

<a href="#" class="nurutto_btn_red">Button</a>
CSS

.nurutto_btn_red {	display: inline-block;	width: 160px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #fff;	background:#F1322C;border-bottom:4px solid #AD2022;	border-radius: 4px;
}
.nurutto_btn_red:hover { cursor: pointer; text-decoration: none; background:#AD2022; transform: translate3d(0, 4px, 0); border-bottom: none;
}

ポチッと凹む

Button

ポチッと凹みます

ポチッと感
transition: .0sをホバー前後に追加すると、ポチッと感を演出できます。

HTML

<a href="#" class="pochitto_btn_blue">Button</a>
CSS

.pochitto_btn_blue {	display: inline-block;	width: 160px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #fff;	background:#0C88CA;	border-bottom:4px solid #005691;	border-radius: 4px;transition: .0s;
}
.pochitto_btn_blue:hover { cursor: pointer; text-decoration: none; background:#005691; transform: translate3d(0, 4px, 0); transition: .0s; border-bottom: none;
}

浮き出すボタン

ふわっと浮き出す

Button

ふわっと浮き出します

浮遊感
box-shadowで影の色やぼかし具合を調整します。

HTML

<a href="#" class="fuwatto_btn_yellow">Button</a>
CSS

.fuwatto_btn_yellow{ display: inline-block; background-color: #FFC605; color: #FFF; width: 160px; padding: 0.8em; text-decoration: none; border-radius: 4px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); -webkit-tap-highlight-color: transparent; transition: .3s ease-out;
}
.fuwatto_btn_yellow:hover{ cursor: pointer; text-decoration: none; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.12), 0 3px 20px 0 rgba(0,0,0,0.12), 0 5px 6px -2px rgba(0,0,0,0.2);
}

ふわっと沈む

Button

浮き上がっているところから押し込みます

HTML

<a href="#" class="fuwapochi_btn_green">Button</a>
CSS

.fuwapochi_btn_green{ display: inline-block; background-color: #40C659; color: #FFF; width: 160px; padding: 0.8em; text-decoration: none; border-radius: 4px; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.12), 0 3px 20px 0 rgba(0,0,0,0.12), 0 5px 6px -2px rgba(0,0,0,0.2); -webkit-tap-highlight-color: transparent; transition: .3s ease-out;
}
.fuwapochi_btn_green:hover{ cursor: pointer; text-decoration: none; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

ひょこっと浮かぶ

Button

浮き上がりと同時に上方向にボタンが動きます

HTML

<a href="#" class="fuwauki_btn_red">Button</a>
CSS

.fuwauki_btn_red{ display: inline-block; background-color: #E85A70; color: #FFF; width: 160px; padding: 0.8em; text-decoration: none; border-radius: 4px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); -webkit-tap-highlight-color: transparent; transition: .2s ease-out;
}
.fuwauki_btn_red:hover{ cursor: pointer; text-decoration: none; transform: translateY(-4px); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 3px 10px 0 rgba(0,0,0,0.12), 0 4px 7px -2px rgba(0,0,0,0.2);
}

なめらかなアニメーション

プルっと拡大


Button

アニメーションを使ってプルっと拡大。

アニメーション
@keyframesで細かいアニメーションの動きを調整します。0~100%の間でどの状態にしたいかを細かく設定することで、複雑な動きも表現できます。

HTML

<a href="#" class="simple_square_btn3">Button</a>
CSS

.simple_square_btn3 {	display: block;	position: relative;	width: 160px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #1B1B1B;	background: #fff; border-radius: 30px;	border:1px solid #1B1B1B;
}
.simple_square_btn3:hover { cursor: pointer; text-decoration: none;	-webkit-animation: simple_square_btn3 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; -moz-animation: simple_square_btn3 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: simple_square_btn3 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}@-webkit-keyframes simple_square_btn3 { 0% { -webkit-transform: scale(0.85); transform: scale(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}@-moz-keyframes simple_square_btn3 { 0% { -webkit-transform: scale(0.85); transform: scale(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}@keyframes simple_square_btn3 { 0% { -webkit-transform: scale(0. 85); transform: scale(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}

ギューンと拡大


Button

ギューンと拡大。

HTML

<a href="#" class="simple_square_btn6">Button</a>
CSS

.simple_square_btn6 {	display: block;	position: relative;	width: 160px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #1B1B1B;	background: #fff; border-radius: 30px;	border:1px solid #1B1B1B; -webkit-backface-visibility: hidden;	-moz-backface-visibility: hidden; backface-visibility: hidden;
}
.simple_square_btn6:hover { cursor: pointer; text-decoration: none;	-webkit-animation: simple_square_btn6 0.5s both;	-moz-animation: simple_square_btn6 0.5s both; animation: simple_square_btn6 0.5s both;
}
@-webkit-keyframes simple_square_btn6 { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); }
}
@-moz-keyframes simple_square_btn6 { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); }
}
@keyframes simple_square_btn6 { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); }
}

ぎゅーっと縮小


Button

ぎゅーっと縮小して、中央に集中させます。

HTML

<a href="#" class="simple_square_btn4">Button</a>
CSS

.simple_square_btn4 {	display: block;	position: relative;	width: 160px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #1B1B1B;	background: #fff;	border-radius: 30px;	border:1px solid #1B1B1B;	-webkit-backface-visibility: hidden;	-moz-backface-visibility: hidden; backface-visibility: hidden;
}
.simple_square_btn4:hover { cursor: pointer; text-decoration: none;	-webkit-animation: simple_square_btn4 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;	-moz-animation: simple_square_btn4 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: simple_square_btn4 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes simple_square_btn4{ 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.85); transform: scale(0.85); }
}
@-moz-keyframes simple_square_btn4{ 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.85); transform: scale(0.85); }
}
@keyframes simple_square_btn4 { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.85); transform: scale(0.85); }
}

ふわっと浮上


Button

ふわっと浮上します。

HTML

<a href="#" class="simple_square_btn8">Button</a>
CSS

.simple_square_btn8 {	display: block;	position: relative;	width: 160px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #1B1B1B;	background: #fff; border-radius: 30px;	border:1px solid #1B1B1B;	-webkit-backface-visibility: hidden;	-moz-backface-visibility: hidden; backface-visibility: hidden;
}
.simple_square_btn8:hover { cursor: pointer; text-decoration: none;	-webkit-animation: simple_square_btn8 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;	-moz-animation: simple_square_btn8 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: simple_square_btn8 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes simple_square_btn8{ 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
}
@-moz-keyframes simple_square_btn8{ 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
}
@keyframes simple_square_btn8 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
}

個性を出したボタン

ロックオン

Button

まるでロックオンするかのようなホバーエフェクト

ロックオン
::before/::after/span::before/span::afterで四隅のかっこを表現し、ボタン全体をscaleを使ってスケールダウンさせています。

HTML

<a href="#" class="lock_on_btn"><span>Button</span></a>
CSS

.lock_on_btn {	display: inline-block;	position: relative;	width: 160px;	height: 50px;	line-height:50px;	text-align: center;	text-decoration: none;	color: #1B1B1B;	background: #fff;
}.lock_on_btn::before { display: inline-block; content: ""; width: 10px; height: 10px; position: absolute; top: 0px; left: 0px; border-top: 1px solid #1B1B1B; border-left: 1px solid #1B1B1B;
}.lock_on_btn::after { display: inline-block; content: ""; width: 10px; height: 10px; position: absolute; top: 0px; right: 0px; border-top: 1px solid #1B1B1B; border-right: 1px solid #1B1B1B;
}.lock_on_btn span::before { display: inline-block; content: ""; width: 10px; height: 10px; position: absolute; bottom: 0px; left: 0px; border-bottom: 1px solid #1B1B1B; border-left: 1px solid #1B1B1B;
}.lock_on_btn span::after { display: inline-block; content: ""; width: 10px; height: 10px; position: absolute; bottom: 0px; right: 0px; border-bottom: 1px solid #1B1B1B; border-right: 1px solid #1B1B1B;
}
.lock_on_btn:hover { cursor: pointer; text-decoration: none; transition: transform .3s;	transform-origin: center;	transform: scale(0.8, 0.8);
}

円形波紋ボタン

波紋が広がるボタン

アイコンはFont Awesomeのものを使用しています

HTML

<a href="#" class=circle_spread_btn"><i class="fas fa-home fa-fw"></i></a>
CSS

.circle_spread_btn {	display: inline-block;	position: relative;	width: 50px;	height: 50px;	line-height: 50px;	text-align: center;	text-decoration: none;	color: #fff;	background: #40C659;	border-radius: 50%;
}
.circle_spread_btn:hover { cursor: pointer; text-decoration: none;	text-align: center; transition: transform .3s;	transform-origin: center;	transform: scale(0.9, 0.9);	opacity: 0.7;
}
.circle_spread_btn::after { display: inline-block; content: ""; width: 49px; height: 49px; position: absolute; border-radius: 50%;	color:#fff; top: -0.5px; left: -0.5px; border: 1px solid #40C659; transition: transform .5s ease;	visibility: hidden;
}
.circle_spread_btn:hover::after { cursor: pointer; text-decoration: none; transition: transform .5s ease;	transform-origin: center;	transform: scale(1.4, 1.4);	opacity: 0.7;	visibility: visible;
}

動く矢印ボタン

詳細はこちら

矢印が動くボタンです

Font Awesomeのアイコンを使っています

HTML

<a href="#" class="arrow_btn">詳細はこちら <span><i class="fas fa-arrow-circle-right fa-fw"></i></span></a>
CSS

.arrow_btn {	display: inline-block;	position: relative;	width: 200px;	padding: 0.8em;	text-align: center;	text-decoration: none;	color: #1B1B1B;	background: #fff;	border-radius: 30px;	border:1px solid #1B1B1B;	transition: transform ease .3s;
}
.arrow_btn:hover { cursor: pointer; text-decoration: none;
}
.arrow_btn span {	display: inline-block;	text-decoration: none;	transition: transform ease .3s;
}
.arrow_btn:hover span{	cursor: pointer;	text-decoration: none;	transform: translateX(6px);
}