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

ボタンデザイン_css

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

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

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

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

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

きょーみ

PCではマウスオーバー時に、スマホ、タブレット端末ではタップ時に動きます。

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

明るく

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_btn6">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">Button</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">Button</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);
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です