CSS・HTMLで作るボタンデザイン80選(web用)

2017/4/22 CSSデザイン

CSSとHTMLだけで作れるボタンデザインを約80種類紹介します。 ユニークなボタンからオシャレなボタンまで揃ってますが、全てHTMLとCSSだけでwebサイトやブログに実装できます。

また画像は使っていないので、全てコピペするだけで導入できるので、気に入ったボタンデザインがあれば是非利用してみて下さいね。

なおCSSとHTMLは最初は非表示となっています。 「CSS・HTMLコードを表示」をクリックするとコードが表示されるようになります。

あと一部のボタンでアイコンフォントを使用していますが、詳しい導入の仕方は下記ページをご覧ください。

スマホやタブレットなどのアイコンフォント【Font Awesome】
スマホやタブレットなどのアイコンフォント【Font Awesome】
スマホやタブレットなどのデバイスアイコン、snsなどのソーシャルアイコン、webアプリケーション、ビデオプレーヤー、...
www.yuu-diaryblog.com
2017-01-23 21:03
目次
立体的なボタン
美しいグラデーションのボタン
フラットデザインのボタン
円形の丸ボタン
切り替え/矢印ボタン
可愛いアニメーションボタン
SNSボタン

立体的なボタン

CSSでドロップシャドウやグラデーションが使われるようになってから、画像を使わなくても簡単にボタンを装飾できるようになりました。 ここでは、よくある立体的なボタンを紹介します。

昔からあるボタン

BUTTON

昔からある一般的な立体型のボタンです。カーソルを当てるとボタンの色が変わり、クリックでボタンが沈んだようになります。

CSS・HTMLコードを表示

<a href="#" class="bt-samp">BUTTON</a>

a.bt-samp,
a.bt-samp:hover,
a.bt-samp:visited{
  display: block;
  height: 28px;
  width: 117px;
  padding-left:1px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  color: #7d8383;
  text-shadow: 0px 1px 0px #fafafa;
  background: #fbfaf4;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfaf4), to(#ece8e6));
  background: -moz-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: -o-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: -ms-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: linear-gradient(top,  #fbfaf4,  #ece8e6);
  border: 1px solid #dcd9d8;
  border-bottom: 1px solid #c1c1bd;
  -webkit-box-shadow:  0 0 1px #c7c5c1;
  -moz-box-shadow:  0 0 1px #c7c5c1;
  box-shadow:  0 0 1px #c7c5c1;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}

a.bt-samp:hover { /*マウスホバー時*/
  color:#9a9f9f;
  background: #fbfbf9;
}

a.bt-samp:active{  /* ボタンを押したとき */
  background:#ece8e4;
  border: none;
  box-shadow:  0 1px 1px #cccbc9, inset 0 0 1px rgba(0, 0, 0, 0.3);
}

昔からあるボタン(角丸)

BUTTON

上のボタンに丸みを付けた角丸タイプの一般的なボタンです。ホバー、クリック時のボタンのスタイルは同じとなってます。丸みを変更したい場合はborder-radiusの部分を変更して下さい。

CSS・HTMLコードを表示

<a href="#" class="bt-samp2">BUTTON</a>

a.bt-samp2,
a.bt-samp2:hover,
a.bt-samp2:visited{
  display: block;
  height: 28px;
  width: 117px;
  padding-left:1px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  color: #7d8383;
  text-shadow: 0px 1px 0px #fafafa;
  background: #fbfaf4;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfaf4), to(#ece8e6));
  background: -moz-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: -o-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: -ms-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: linear-gradient(top,  #fbfaf4,  #ece8e6);
  border: 1px solid #dcd9d8;
  border-bottom: 1px solid #c1c1bd;
  -webkit-box-shadow:  0 0 1px #c7c5c1;
  -moz-box-shadow:  0 0 1px #c7c5c1;
  box-shadow:  0 0 1px #c7c5c1;
  -webkit-border-radius: 15px; 
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp2:hover { /*マウスホバー時*/
  color:#9a9f9f;
  background: #fbfbf9;
}
a.bt-samp2:active{  /* ボタンを押したとき */
  background:#ece8e4;
  border: none;
  box-shadow:  0 1px 1px #cccbc9, inset 0 0 1px rgba(0, 0, 0, 0.3);
}

押されてるスタイル

BUTTON

最初からボタンが押された状態になっているタイプです。ボタンにマウスを乗せると浮き上がったようになります。そしてクリックで再びへこみます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp3">BUTTON</a>

a.bt-samp3,
a.bt-samp3:hover,
a.bt-samp3:visited{
  display: block;
  height: 28px;
  width: 117px;
  padding-left:1px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  color:#ffad3a;;
  text-shadow: 0px 1px 0px #fafafa;
  background:#ece8e4;
  border: none;
  box-shadow:  0 1px 1px #cccbc9, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 15px; 
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp3:hover { /*マウスホバー時*/
  color:#9a9f9f;
  background: #fbfbf9;
  box-shadow:  0 1px 1px #cccbc9, inset 0 0px 1px rgba(0, 0, 0, 0.3);
}
a.bt-samp3:active{  /* ボタンを押したとき */
  color:#ffad3a;;
  background:#ece8e4;
  border: none;
  box-shadow:  0 1px 1px #cccbc9, inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

エンボス風

BUTTON

ボタンの周りをエンボス風にしたデザインです。div要素にグラデーションで背景をつけ、ボタンが立体的に見えるようにしています。

CSS・HTMLコードを表示

<div class="bt"><a href="#" class="bt-samp4">BUTTON</a></div>

div.bt{
  padding:5px;
  height: 30px;
  width: 120px;
  background: #fbfaf4;
  background: -webkit-gradient(linear, left top, left bottom, from(#e3dfde), to(#fbfaf4));
  background: -moz-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: -o-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: -ms-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: linear-gradient(top,  #e3dfde,  #fbfaf4);
}
a.bt-samp4,
a.bt-samp4:hover,
a.bt-samp4:visited{
  display: block;
  position: relative;
  height: 28px;
  width: 117px;
  padding-left:1px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  color: #7d8383;
  text-shadow: 0px 1px 0px #fafafa;
  background: #fbfaf4;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfaf4), to(#ece8e6));
  background: -moz-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: -o-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: linear-gradient(top,  #fbfaf4,  #ece8e6);
  border: 1px solid #dcd9d8;
  border-bottom: 1px solid #c1c1bd;
  -webkit-box-shadow:  0 0 5px #c7c5c1;
  -moz-box-shadow:  0 0 5px #c7c5c1;
  box-shadow:  0 0 5px #c7c5c1;
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp4:hover {  /* マウスホバー時 */
  color:#9a9f9f;
  background: #fbfbf9;
}
a.bt-samp4:active{  /* クリック時 */
  background:#ece8e6;
  border: none;
  -webkit-box-shadow:  0 1px 1px #cccbc9, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow:  0 1px 1px #cccbc9, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow:  0 1px 1px #cccbc9, inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

エンボス風(角丸)

BUTTON

角丸デザインにしたエンボス風のボタンです。HTMLコードを見るとわかりますが、こちらもaタグの親要素にdivを追加し、グラデーション+border-radiusで角丸に合わせたエンボス感を再現しています。

CSS・HTMLコードを表示

<div class="bt2"><a href="#" class="bt-samp5">BUTTON</a></div>

div.bt2{
  padding:5px;
  height: 30px;
  width: 120px;
  background: #fbfaf4;
  background: -webkit-gradient(linear, left top, left bottom, from(#e3dfde), to(#fbfaf4));
  background: -moz-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: -o-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: -ms-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: linear-gradient(top,  #e3dfde,  #fbfaf4);
  -webkit-border-radius: 15px; 
  -moz-border-radius: 15px;
  border-radius: 15px;
}
a.bt-samp5,
a.bt-samp5:hover,
a.bt-samp5:visited{
  display: block;
  position: relative;
  height: 28px;
  width: 117px;
  padding-left:1px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  color: #7d8383;
  text-shadow: 0px 1px 0px #fafafa;
  background: #fbfaf4;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfaf4), to(#ece8e6));
  background: -moz-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: -o-linear-gradient(top,  #fbfaf4,  #ece8e6);
  background: linear-gradient(top,  #fbfaf4,  #ece8e6);
  border: 1px solid #dcd9d8;
  border-bottom: 1px solid #c1c1bd;
  -webkit-box-shadow:  0 0 5px #c7c5c1;
  -moz-box-shadow:  0 0 5px #c7c5c1;
  box-shadow:  0 0 5px #c7c5c1;
  -webkit-border-radius: 15px; 
  -moz-border-radius: 15px;
  border-radius: 15px;
}
a.bt-samp5:hover {  /* マウスホバー時 */
  color:#9a9f9f;
  background: #fbfbf9;
}
a.bt-samp5:active{  /* クリック時 */
  background:#ece8e6;
  border: none;
  -webkit-box-shadow:  0 1px 1px #cccbc9, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow:  0 1px 1px #cccbc9, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow:  0 1px 1px #cccbc9, inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

エンボス風(押されてるデザイン)

BUTTON

ボタンをマウスホバーで浮き上がるエンボス風デザインです。最初は押されているような状態ですが、マウスを乗せると浮き上がり、クリックで沈みます。

CSS・HTMLコードを表示

<div class="bt3"><a href="#" class="bt-samp6">BUTTON</a></div>

div.bt3{
  padding:5px;
  height: 30px;
  width: 120px;
  background: #fbfaf4;
  background: -webkit-gradient(linear, left top, left bottom, from(#e3dfde), to(#fbfaf4));
  background: -moz-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: -o-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: -ms-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: linear-gradient(top,  #e3dfde,  #fbfaf4);
  -webkit-border-radius: 15px; 
  -moz-border-radius: 15px;
  border-radius: 15px;
}
a.bt-samp6,
a.bt-samp6:hover,
a.bt-samp6:visited{
  display: block;
  height: 28px;
  width: 117px;
  padding-left:1px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  color:#ffad3a;;
  text-shadow: 0px 1px 0px #fafafa;
  background:#ece8e4;
  border: none;
  box-shadow:  0 1px 1px #cccbc9, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 15px; 
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp6:hover { /*マウスホバー時*/
  color:#9a9f9f;
  background: #fbfbf9;
  box-shadow:  0 1px 1px #cccbc9, inset 0 0px 1px rgba(0, 0, 0, 0.3);
}
a.bt-samp6:active{  /* ボタンを押したとき */
  color:#ffad3a;;
  background:#ece8e4;
  border: none;
  box-shadow:  0 1px 1px #cccbc9, inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

シンプルなボタン

BUTTON

シンプルだけでオシャレなデザインのボタンです。box-shadowで立体感を出してますが、クリックすると沈みます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp7">BUTTON</a>

a.bt-samp7{
  display: block;
  height: 35px;
  width: 120px;
  text-decoration: none;
  background: #fdc689;
  color: #fff;
  line-height: 37px;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 2px 1px #d4842c;
}
a.bt-samp7:active{ /* クリック時の設定 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow:none;
}

シンプルなボタン(影付き)

BUTTON

上のボタンのbox-shadowの数値を変更し、薄い影が付いているようにしたデザインです。box-shadowの数値を変更すると影の広がりや角度を設定できます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp8">BUTTON</a>

a.bt-samp8{
  display: block;
  height: 35px;
  width: 120px;
  text-decoration: none;
  background: #fdc689;
  color: #fff;
  line-height: 37px;
  text-align: center;
  border-radius: 3px;
  box-shadow: 1px 2px 4px #d4842c;
}
a.bt-samp8:active{  /* クリック時の設定 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow:none;
}

エンボス風の文字

BUTTON

文字をエンボス風にしたタイプのボタンです。文字の周りに影を付ける事でへこんでいるように見せています。

CSS・HTMLコードを表示

<a href="#" class="bt-samp9">BUTTON</a>

a.bt-samp9{
  display: block;
  height: 35px;
  width: 120px;
  text-decoration: none;
  background: #fdc689;
  color: #e19542;
  font-weight: bold;
  line-height: 37px;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0px 2px 1px #d4842c;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}
a.bt-samp9:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow:none;
}

ロゴのようなエンボス風文字

BUTTON

ボタンの中の文字がロゴのように浮いているエンボス風デザインです。文字に対して2種類の影を付ける事で、浮いているようなエンボス風の感じになります。

CSS・HTMLコードを表示

<a href="#" class="bt-samp10">BUTTON</a>

a.bt-samp10{
  display: block;
  height: 35px;
  width: 120px;
  text-decoration: none;
  background: #fdc689;
  color: #e19542;
  font-weight: bold;
  line-height: 37px;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0px 2px 1px #d4842c;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.7), 1px 1px 1px rgba(0, 0, 0, 0.7);
}
a.bt-samp10:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow:none;
}

ブロック風のボタン

BUTTON

側面と上面があるブロック風のボタンです。クリックするとボタンがへこみ、マウスボタンを離すとゆっくり浮き上がってきます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp11">BUTTON</a>

a.bt-samp11{
  position: relative;
  display: block;
  height: 35px;
  width: 120px;
  text-decoration: none;
  background: #fdc689;
  color: #fff;
  font-weight: bold;
  line-height: 37px;
  text-align: center;
  border-top: solid 5px #e29e52;
  border-left: solid 5px #d4842c;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp11:before{
  content:"";
  position: absolute;
  bottom: 0;
  left: -5px;
  border-width: 0 5px 5px 0;
  border-style: solid;
  width: 0;
  border-color: transparent;
  border-bottom-color: #fff;
}
a.bt-samp11:after{
  content:"";
  position: absolute;
  top: -5px;
  right: 0px;
  border-width: 0 5px 5px 0;
  border-style: solid;
  width: 0;
  border-color: #fff;
  border-bottom-color: transparent;
}
a.bt-samp11:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  border:none;
}

矢印のアイコン付きボタン

BUTTON

Font Awesomeのアイコンフォント(矢印)を追加したデザイン。このサンプルではHTMLに直接アイコンフォントのコードを追加していますが、CSSだけでもアイコンフォントを表示することができます。また矢印アイコンとテキストの間のスペースは、HTMLのアイコンのコードとテキストの間に半角スペースを空ける事でとってます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp12">
  <i class="fa fa-chevron-circle-right"></i> BUTTON
</a>

a.bt-samp12{
  position: relative;
  display: block;
  height: 35px;
  width: 120px;
  text-decoration: none;
  background: #fdc689;
  color: #fff;
  line-height: 37px;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 2px 1px #d4842c;
}
a.bt-samp12:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow:none;
}

黒系のボタン

BUTTON

webサイト・ブログの背景が暗い時に便利な黒系のボタンデザインです。文字を黄色系の色にする事で、少しだけオシャレで高級感があるようなデザインとなってます。サイト背景が白の時にはあまりオススメできません。

CSS・HTMLコードを表示

<a href="#" class="bt-samp13">BUTTON</a>

a.bt-samp13,
a.bt-samp13:hover,
a.bt-samp13:visited{
  position: relative;
  display: block;
  height: 29px;
  width: 119px;
  padding-left: 1px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  border-top:1px solid #6b7688;
  color: #d4d2d2;
  text-shadow: 0px 1px 0px #222;
  color: #f2f1f1;
  background: #586170;
  background: -webkit-gradient(linear, left top, left bottom, from(#586170), to(#424551));
  background: -moz-linear-gradient(top,  #586170,  #424551);
  background: -o-linear-gradient(top,  #586170,  #424551);
  background: -ms-linear-gradient(top,  #586170,  #424551);
  background: linear-gradient(top,  #586170,  #424551);
  -webkit-box-shadow:  0 1px 1px #1d1e20;
  -moz-box-shadow:  0 1px 1px #1d1e20;
  box-shadow:  0 1px 1px #1d1e20;
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp13:hover { /*マウスホバー時*/
  color: #f2f1f1;
  background: #3f4551;
  background: -webkit-gradient(linear, left top, left bottom, from(#3f4551), to(#333640));
  background: -moz-linear-gradient(top,  #3f4551,  #333640);
  background: -o-linear-gradient(top,  #3f4551,  #333640);
  background: -ms-linear-gradient(top,  #3f4551,  #333640);
  background: linear-gradient(top,  #3f4551,  #333640);
}
a.bt-samp13:active{  /* ボタンを押したとき */
  color: #f2f1f1;
  bottom:-2px;
  height: 30px;
  width: 119px;
  border: none;
  border-bottom:1px solid #6b7688;
  background: #3f4551;
  background: -webkit-gradient(linear, left top, left bottom, from(#3f4551), to(#333640));
  background: -moz-linear-gradient(top,  #3f4551,  #333640);
  background: -o-linear-gradient(top,  #3f4551,  #333640);
  background: -ms-linear-gradient(top,  #3f4551,  #333640);
  background: linear-gradient(top,  #3f4551,  #333640);
  -webkit-box-shadow:  0 0 3px #1d1e20 inset;
  -moz-box-shadow:  0 0 3px #1d1e20 inset;
  box-shadow:  0 0 3px #1d1e20 inset;
}

黒系のボタン(角丸)

BUTTON

上のボタンを角丸にしたデザインです。

CSS・HTMLコードを表示

<a href="#" class="bt-samp14">BUTTON</a>

a.bt-samp14,
a.bt-samp14:hover,
a.bt-samp14:visited{
  position: relative;
  display: block;
  height: 29px;
  width: 119px;
  padding-left: 1px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  border-top:1px solid #6b7688;
  color: #d4d2d2;
  text-shadow: 0px 1px 0px #222;
  color: #f2f1f1;
  background: #586170;
  background: -webkit-gradient(linear, left top, left bottom, from(#586170), to(#424551));
  background: -moz-linear-gradient(top,  #586170,  #424551);
  background: -o-linear-gradient(top,  #586170,  #424551);
  background: -ms-linear-gradient(top,  #586170,  #424551);
  background: linear-gradient(top,  #586170,  #424551);
  -webkit-box-shadow:  0 1px 1px #1d1e20;
  -moz-box-shadow:  0 1px 1px #1d1e20;
  box-shadow:  0 1px 1px #1d1e20;
  -webkit-border-radius: 15px; 
  -moz-border-radius: 15px;
  border-radius: 15px;
}
a.bt-samp14:hover { /*マウスホバー時*/
  color: #f2f1f1;
  background: #3f4551;
  background: -webkit-gradient(linear, left top, left bottom, from(#3f4551), to(#333640));
  background: -moz-linear-gradient(top,  #3f4551,  #333640);
  background: -o-linear-gradient(top,  #3f4551,  #333640);
  background: -ms-linear-gradient(top,  #3f4551,  #333640);
  background: linear-gradient(top,  #3f4551,  #333640);
}
a.bt-samp14:active{  /* ボタンを押したとき */
  color: #f2f1f1;
  bottom:-2px;
  height: 30px;
  width: 119px;
  border: none;
  border-bottom:1px solid #6b7688;
  background: #3f4551;
  background: -webkit-gradient(linear, left top, left bottom, from(#3f4551), to(#333640));
  background: -moz-linear-gradient(top,  #3f4551,  #333640);
  background: -o-linear-gradient(top,  #3f4551,  #333640);
  background: -ms-linear-gradient(top,  #3f4551,  #333640);
  background: linear-gradient(top,  #3f4551,  #333640);
  -webkit-box-shadow:  0 0 3px #1d1e20 inset;
  -moz-box-shadow:  0 0 3px #1d1e20 inset;
  box-shadow:  0 0 3px #1d1e20 inset;
}

黒系のボタン(押してある状態)

BUTTON

最初から押してある状態の黒系ボタンです。マウスホバーで浮き上がり、ボタンクリックで色が変化します。

CSS・HTMLコードを表示

<a href="#" class="bt-samp15">BUTTON</a>

a.bt-samp15,
a.bt-samp15:hover,
a.bt-samp15:visited{
  position: relative;
  bottom: -2px;
  display: block;
  height: 30px;
  width: 119px;
  padding-left: 1px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  border-top:1px solid #6b7688;
  color: #d4d2d2;
  text-shadow: 0px 1px 0px #222;
  color: #f2f1f1;
   border: none;
  border-bottom:1px solid #6b7688;
  background: #3f4551;
  background: -webkit-gradient(linear, left top, left bottom, from(#3f4551), to(#333640));
  background: -moz-linear-gradient(top,  #3f4551,  #333640);
  background: -o-linear-gradient(top,  #3f4551,  #333640);
  background: -ms-linear-gradient(top,  #3f4551,  #333640);
  background: linear-gradient(top,  #3f4551,  #333640);
  -webkit-box-shadow:  0 0 3px #1d1e20 inset;
  -moz-box-shadow:  0 0 3px #1d1e20 inset;
  box-shadow:  0 0 3px #1d1e20 inset;
  -webkit-border-radius: 15px; 
  -moz-border-radius: 15px;
  border-radius: 15px;
}
a.bt-samp15:hover { /*マウスホバー時*/
  bottom: 0px;
  color: #f2f1f1;
  border-top:1px solid #6b7688;
  background: #586170;
  background: -webkit-gradient(linear, left top, left bottom, from(#586170), to(#424551));
  background: -moz-linear-gradient(top,  #586170,  #424551);
  background: -o-linear-gradient(top,  #586170,  #424551);
  background: -ms-linear-gradient(top,  #586170,  #424551);
  background: linear-gradient(top,  #586170,  #424551);
  -webkit-box-shadow:  0 1px 1px #1d1e20;
  -moz-box-shadow:  0 1px 1px #1d1e20;
  box-shadow:  0 1px 1px #1d1e20;
}
a.bt-samp15:active{  /* ボタンを押したとき */
  color: #f2f1f1;
  height: 30px;
  background: #3f4551;
  background: -webkit-gradient(linear, left top, left bottom, from(#3f4551), to(#333640));
  background: -moz-linear-gradient(top,  #3f4551,  #333640);
  background: -o-linear-gradient(top,  #3f4551,  #333640);
  background: -ms-linear-gradient(top,  #3f4551,  #333640);
  background: linear-gradient(top,  #3f4551,  #333640);
}

美しいグラデーションのボタン

綺麗で美しいグラデーションのボタン一覧です。 最初はCSSの一般的なグラデーションを使ったボタンデザインを紹介します。

徐々に美しいグラデーションのボタンを紹介していきます。

ピンクのグラデーションボタン

BUTTON

ピンク色のグラデーションボタンです。文字はエンボス風にしています。またspanタグを追加する事で上がちょっと光っているようにしています。

CSS・HTMLコードを表示

<a href="#" class="bt-samp16"><span>BUTTON</span></a>

a.bt-samp16{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 28px;
  text-align: center;
  color: #e4016f;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 3px #ccc;
  border-top: 2px solid #d10065;
  border-bottom: 2px solid #d10065;
  background: #e4016f;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff69b1), to(#e4016f));
  background: -moz-linear-gradient(top, #ff69b1, #e4016f);
  background: -o-linear-gradient(top,#ff69b1, #e4016f);
  background: -ms-linear-gradient(top,#ff69b1, #e4016f);
  background: linear-gradient(top, #ff69b1, #e4016f);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff69b1', endColorstr='#e4016f');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff69b1', endColorstr='#e4016f')";
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp16 span{
  display: block;
  padding: 2px 0;
  border-top:2px solid #ffc1df;
}
a.bt-samp16:active{  /* クリックした時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

緑のグラデーションボタン

BUTTON

背景が緑グラデーションのボタンです。上のデザインの色違いバージョンです。

CSS・HTMLコードを表示

<a href="#" class="bt-samp17"><span>BUTTON</span></a>

a.bt-samp17{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 28px;
  text-align: center;
  color: #80bf01;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 3px #ccc;
  border-top: 2px solid #80bf01;
  border-bottom: 2px solid #72a805;
  background: #80bf01;
  background: -webkit-gradient(linear, left top, left bottom, from(#c1f558), to(#80bf01));
  background: -moz-linear-gradient(top, #c1f558, #80bf01);
  background: -o-linear-gradient(top, #c1f558, #80bf01);
  background: -ms-linear-gradient(top, #c1f558, #80bf01);
  background: linear-gradient(top, #c1f558, #80bf01);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#c1f558', endColorstr='#80bf01');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#c1f558', endColorstr='#80bf01')";
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp17 span{
  display: block;
  padding: 2px 0;
  border-top:2px solid #fff;
}
a.bt-samp17:active{  /* クリックした時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

オレンジのグラデーションボタン

BUTTON

オレンジ色バージョンとなってます。ちなみにHTMLソースのspanタグを取り除ければ上のラインは表示されません。またボタン内のテキストは、text-shadowを削除すれば通常の文字で表示されます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp18"><span>BUTTON</span></a>

a.bt-samp18{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 28px;
  text-align: center;
  color: #fa7e01;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 3px #ccc;
  border-top: 2px solid #e87502;
  border-bottom: 2px solid #e87502;
  background: #fa7e01;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffb870), to(#fa7e01));
  background: -moz-linear-gradient(top, #ffb870, #fa7e01);
  background: -o-linear-gradient(top, #ffb870, #fa7e01);
  background: -ms-linear-gradient(top, #ffb870, #fa7e01);
  background: linear-gradient(top, #ffb870, #fa7e01);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffb870', endColorstr='#fa7e01');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffb870', endColorstr='#fa7e01')";

  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp18 span{
  display: block;
  padding: 2px 0;
  border-top:2px solid #ffdfbe;
}
a.bt-samp18:active{  /* クリックした時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

黄土色のグラデーションボタン

BUTTON

黄土色のグラデーションを使ったデザインです。

CSS・HTMLコードを表示

<a href="#" class="bt-samp19"><span>BUTTON</span></a>

a.bt-samp19{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 28px;
  text-align: center;
  color: #e5ad01;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 3px #ccc;
  border-top: 2px solid #e3ab00;
  border-bottom: 2px solid #d6a201;
  background: #e5ad01;
  background: -webkit-gradient(linear, left top, left bottom, from(#f7d15b), to(#e5ad01));
  background: -moz-linear-gradient(top, #f7d15b, #e5ad01);
  background: -o-linear-gradient(top, #f7d15b, #e5ad01);
  background: -ms-linear-gradient(top, #f7d15b, #e5ad01);
  background: linear-gradient(top, #f7d15b, #e5ad01);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f7d15b', endColorstr='#e5ad01');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f7d15b', endColorstr='#e5ad01')";
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp19 span{
  display: block;
  padding: 2px 0;
  border-top:2px solid #fce9ae; 
}
a.bt-samp19:active{  /* クリックした時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

青のグラデーションボタン

BUTTON

青バージョンのグラデーションボタンです。エンボス風の文字を止めて、通常にしてみました。

CSS・HTMLコードを表示

<a href="#" class="bt-samp20"><span>BUTTON</span></a>

a.bt-samp20{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 3px #ccc;
  border-top: 2px solid #119de9;
  border-bottom: 2px solid #0288d1;
  background: #119de9;
  background: -webkit-gradient(linear, left top, left bottom, from(#6dccff), to(#119de9));
  background: -moz-linear-gradient(top, #6dccff, #119de9);
  background: -o-linear-gradient(top, #6dccff, #119de9);
  background: -ms-linear-gradient(top, #6dccff, #119de9);
  background: linear-gradient(top, #6dccff, #119de9);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6dccff', endColorstr='#119de9');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6dccff', endColorstr='#119de9')";
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp20 span{
  display: block;
  padding: 2px 0;
  border-top:2px solid #c6ebff;
}
a.bt-samp20:active{  /* クリックした時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

紫のグラデーションボタン

BUTTON

浮いているような文字にしたデザインの、紫のグラデーションボタンです。

CSS・HTMLコードを表示

<a href="#" class="bt-samp21"><span>BUTTON</span></a>

a.bt-samp21{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 28px;
  text-align: center;
  color: #d3abfd;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  box-shadow: 0 2px 3px #ccc;
  border-top: 2px solid #9f64db;
  border-bottom: 2px solid #9f64db;
  background: #ae7ae3;
  background: -webkit-gradient(linear, left top, left bottom, from(#d3abfd), to(#ae7ae3));
  background: -moz-linear-gradient(top, #d3abfd, #ae7ae3);
  background: -o-linear-gradient(top, #d3abfd, #ae7ae3);
  background: -ms-linear-gradient(top, #d3abfd, #ae7ae3);
  background: linear-gradient(top, #d3abfd, #ae7ae3);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d3abfd', endColorstr='#ae7ae3');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d3abfd', endColorstr='#ae7ae3')";
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp21 span{
  display: block;
  padding: 2px 0;
  border-top:2px solid #efe0fe;
}
a.bt-samp21:active{  /* クリックした時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

赤のグラデーションボタン

BUTTON

font-weightをノーマルにした赤のグラデーションボタンです。

CSS・HTMLコードを表示

<a href="#" class="bt-samp22"><span>BUTTON</span></a>

a.bt-samp22{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 28px;
  text-align: center;
  color: #d3abfd;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
  box-shadow: 0 2px 3px #ccc;
  border-top: 2px solid #dd0f35;
  border-bottom: 2px solid #dd0f35;
  background: #d1193b;
  background: -webkit-gradient(linear, left top, left bottom, from(#fe5f7c), to(#d1193b));
  background: -moz-linear-gradient(top, #fe5f7c, #d1193b);
  background: -o-linear-gradient(top, #fe5f7c, #d1193b);
  background: -ms-linear-gradient(top, #fe5f7c, #d1193b);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fe5f7c', endColorstr='#d1193b');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fe5f7c', endColorstr='#d1193b')";
  background: linear-gradient(top, #fe5f7c, #d1193b);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fe5f7c', endColorstr='#d1193b');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fe5f7c', endColorstr='#d1193b)";
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp22 span{
  display: block;
  padding: 2px 0;
  border-top:2px solid #ffc0cc;
}
a.bt-samp22:active{  /* クリックした時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

横のグラデーション

BUTTON

横から徐々に色が変わるデザインのグラデーションボタンです。マウスホバーで背景が白くなり、ボタンに枠線が付きます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp23">BUTTON</a>

a.bt-samp23{
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background: #cfe7fa;
  background: -moz-linear-gradient(left, #cfe7fa 0%, #6393c1 100%); 
  background: -webkit-linear-gradient(left, #cfe7fa 0%,#6393c1 100%); 
  background: linear-gradient(to right, #cfe7fa 0%,#6393c1 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=1 );
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp23:hover{
  color: #cfe7fa;
  background: #fff;
  border: solid 1px #cfe7fa;
}

中央に向けたグラデーション

BUTTON

紫っぽい色を中央よりにグラデーションしたデザインです。

CSS・HTMLコードを表示

<a href="#" class="bt-samp24">BUTTON</a>

a.bt-samp24{
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background: #cb60b3; 
  background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); 
  background: -webkit-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); 
  background: linear-gradient(to bottom, #cb60b3 0%,#ad1283 50%,#de47ac 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=0 );
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}
a.bt-samp24:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

角丸の斜めグラデーションボタン

BUTTON

角丸にして影を付けたデザインです。ボタン背景は斜めのオレンジグラデーションとなってます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp25">BUTTON</a>

a.bt-samp25{
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #f9c667;
  background: -moz-linear-gradient(-45deg, #f9c667 0%, #f79621 100%); 
  background: -webkit-linear-gradient(-45deg, #f9c667 0%,#f79621 100%); 
  background: linear-gradient(135deg, #f9c667 0%,#f79621 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=1 );
  border-radius: 20px;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}
a.bt-samp25:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

角丸でシンプルなオレンジグラデーションボタン

BUTTON

上のボタンの丸みを抑えた、シンプルなオレンジグラデーションのボタンです。ボーダーと影を付けていますが、クリックすると消えます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp26">BUTTON</a>

a.bt-samp26{
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #f9c667;
  background: -moz-linear-gradient(-45deg, #f9c667 0%, #f79621 100%); 
  background: -webkit-linear-gradient(-45deg, #f9c667 0%,#f79621 100%); 
  background: linear-gradient(135deg, #f9c667 0%,#f79621 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=1 );
  border-radius: 5px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  border-bottom: solid 3px #ca7815;
}
a.bt-samp26:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
  border-bottom: none;
}

ひし型デザイン

BUTTON

ひし型背景の上にうっすらと白のグラデーションをかけたデザイン。ちょっとオシャレなボタンが欲しい時に是非！

※Internet Explorer未対応です。

CSS・HTMLコードを表示

<a href="#" class="bt-samp27"><span>BUTTON</span></a>

a.bt-samp27{
  font-family:'Mv Boli', cursive;
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #cbbe9c;
  background-color:#fff;
  background:-webkit-gradient(linear, left bottom, left top, color-stop(0.50, #f4f3f2),color-stop(0.50, #fcfcfa));
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius:5px;
  overflow: hidden;
}
a.bt-samp27 span{
  display:block;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #fff), color-stop(.25, transparent), to(transparent)),
                    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #fff), color-stop(.25, transparent), to(transparent)),
                    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #fff)),
                    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #fff));
  -webkit-background-size:8px 8px;
}
a.bt-samp27:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

チェック柄デザイン

BUTTON

オシャレなチェック柄の白グラデーションをかけたデザインです。上50%、下50%にそれぞれ濃さの違う白グラデーションがかかってます。

※Internet Explorer未対応です。

CSS・HTMLコードを表示

<a href="#" class="bt-samp28"><span>BUTTON</span></a>

a.bt-samp28{
  font-family:'Mv Boli', cursive;
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #cbbe9c;
  background-color:#fff;
  background:-webkit-gradient(linear, left bottom, left top, color-stop(0.50, #f4f3f2),color-stop(0.50, #fcfcfa));
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius:5px;
  overflow: hidden;
}
a.bt-samp28 span{
  display:block;
  background-image: -webkit-linear-gradient(45deg,  #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%),
                    -webkit-linear-gradient(-135deg, #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%);
  -webkit-background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
a.bt-samp28:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

縦ストライプ

BUTTON

縦ストライプのボタンデザインです。こちらも同じく白系のグラデーションをかけてます。変わったデザインのボタンが使いたい時に是非！

※Internet Explorer未対応です。

CSS・HTMLコードを表示

<a href="#" class="bt-samp29"><span>BUTTON</span></a>

a.bt-samp29{
  font-family:'Mv Boli', cursive;
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #cbbe9c;
  background-color:#fff;
  background:-webkit-gradient(linear, left bottom, left top, color-stop(0.50, #f4f3f2),color-stop(0.50, #fcfcfa));
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius:5px;
  overflow: hidden;
}
a.bt-samp29 span{
  display:block;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #fff), color-stop(.5, transparent), to(transparent));
  -webkit-background-size: 6px 6px;
}
a.bt-samp29:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}

ちなみに上記の白系グラデーションを使ったボタンは、下記のページでも紹介していますので、良ければご覧ください。

背景パターンに半透明マスクをかけたボタンデザイン【CSS】
背景パターンに半透明マスクをかけたボタンデザイン【CSS】
CSSのグラデーションを使った背景パターンに半透明のマスクをかけてデザインした、オシャレなボタンのサンプルを...
www.yuu-diaryblog.com
2017-02-04 17:29

フラットデザインのボタン

立体的な表現をしていないフラットデザインのボタン一覧です。 影などは当然ついてないので、とてもシンプルなデザインのCSSボタンとなってます。

シンプルフラット

BUTTON

背景を付けただけのシンプルなボタン。ホバーで背景が白になり、ボーダーが表示されます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp30">BUTTON</a>

a.bt-samp30{
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #2bb6c1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp30:hover{
  background: #fff;
  color: #2bb6c1;
  border:solid 1px #2bb6c1;
}

シンプルボーダー

BUTTON

ボーダーを付けただけのシンプルなデザインです。ホバーでボタンに背景が表示されます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp31">BUTTON</a>

a.bt-samp31{
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #2bb6c1;
  border:solid 1px #2bb6c1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp31:hover{
  background: #2bb6c1;
  color: #fff;
}

破線

BUTTON

破線で囲ったデザインです。ホバーエフェクトは上記のボタンと同じ

CSS・HTMLコードを表示

<a href="#" class="bt-samp32">BUTTON</a>

a.bt-samp32{
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #2bb6c1;
  border:dashed 1px #2bb6c1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp32:hover{
  background: #2bb6c1;
  color: #fff;
}

矢印付きのフラットデザイン

BUTTON

矢印を付けただけのよくあるフラットデザイン風のボタンです。矢印アイコンはfont awesomeを使用しています。

CSS・HTMLコードを表示

<a href="#" class="bt-samp33"><i class="fa fa-chevron-right"></i> BUTTON</a>

a.bt-samp33{
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #2bb6c1;
  border:solid 1px #2bb6c1;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp33:hover{
  background: #2bb6c1;
  color: #fff;
}

角丸フラット

BUTTON

角丸にしただけのシンプルなボタンです。

CSS・HTMLコードを表示

<a href="#" class="bt-samp34">BUTTON</a>

a.bt-samp34{
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #2bb6c1;
  border:solid 1px #2bb6c1;
  border-radius: 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp34:hover{
  background: #2bb6c1;
  color: #fff;
}

ホバーエフェクト付きのフラット

BUTTON

マウスホバーで左上の三角が右に移動するエフェクトが付いている、フラットタイプのボタンデザインです。cssの疑似要素とアニメーションを使って再現しています。

CSS・HTMLコードを表示

<a href="#" class="bt-samp35">BUTTON</a>

a.bt-samp35{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #42a5f5;
  border:solid 1px #fff;
  overflow: hidden;
}
a.bt-samp35:before{
  content:"";
  position: absolute;
  top: -25px;
  left: -20px;
  height:90px;
  width:20px;
  background : #fff;
  opacity: 0.3;
  transform: rotate(40deg);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp35:hover:before{
  left:95%;
}

付箋風ボタン

BUTTON

付箋風のデザインです。ボタン部分にマウスを乗せると、左側の薄い色の部分が右へ移動し全体を覆うようなエフェクトが付いてます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp36">BUTTON</a>

a.bt-samp36{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #42a5f5;
  border:solid 1px #fff;
  overflow: hidden;
}
a.bt-samp36:before{
  content:"";
  position: absolute;
  top: 0px;
  left: -110px;
  height:35px;
  width:120px;
  background : #fff;
  opacity: 0.3;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp36:hover:before{
  left:0;
}

上だけ角丸(エフェクト付き)

BUTTON

ボタンの上部だけ角丸にしたちょっと可愛いエフェクト付きのデザインです。こちらも同じようなエフェクトで、マウスホバーで下の薄い部分が上まであがります。

CSS・HTMLコードを表示

<a href="#" class="bt-samp37">BUTTON</a>

a.bt-samp37{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #42a5f5;
  border:solid 1px #fff;
  overflow: hidden;
  border-radius:10px 10px 0 0;
}
a.bt-samp37:before{
  content:"";
  position: absolute;
  bottom: -27px;
  left: 0;
  height:35px;
  width:120px;
  background : #fff;
  opacity: 0.3;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp37:hover:before{
  bottom:0;
}

斜め上から背景が降りてくるデザイン

BUTTON

斜め上から背景がゆっくり降りてくるボタンデザインです。コチラも同じようなエフェクトですが、アニメーションの開始位置を変える事が斜めから背景が下りてくるようになります。

CSS・HTMLコードを表示

<a href="#" class="bt-samp38">BUTTON</a>

a.bt-samp38{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #42a5f5;
  border:solid 1px #fff;
  overflow: hidden;
}
a.bt-samp38:after{
  content:"";
  position: absolute;
  top: -100%;
  left: -100%;
  height: 35px;
  width: 120px;
  background : #fff;
  opacity: 0.3;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp38:hover:after{
  top: 0;
  left: 0;
}

斜め左右に広がるエフェクト付き

BUTTON

マウスホバーで中央から左右に背景が広がり、クリックで全体に背景が広がるエフェクトが付いたボタンです。オシャレでカッコよく、シンプルなフラットボタンが欲しい時にピッタリ！

CSS・HTMLコードを表示

<a href="#" class="bt-samp39">BUTTON</a>

a.bt-samp39{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  border:solid 1px #fff;
  overflow: hidden;
  z-index: 1;
}
a.bt-samp39:after{
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0;
  width: 100%;
  background : #fff;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  z-index: -1;
}
a.bt-samp39:hover{
  color: #42a5f5;
}
a.bt-samp39:hover:after{
  height: 250%;
  opacity: 1;
}
a.bt-samp39:active:after{
  height: 350%;
  opacity: 1;
}

破線に切り替わる角丸ボタン

BUTTON

マウスホバーで角丸デザインに切り替わるフラットボタンです。さらにボタンをクリックすると若干下がります。

CSS・HTMLコードを表示

<a href="#" class="bt-samp40">BUTTON</a>

a.bt-samp40{
  display: block;
  text-decoration: none;
  height:35px;
  width: 120px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #42a5f5;
  border-radius: 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}

a.bt-samp40:hover{
  color: #42a5f5;
  border: dashed 1px #42a5f5;
  background: none;
}
a.bt-samp40:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

円形の丸ボタン

ユニークで可愛いデザインの円形の丸ボタン一覧です。 テキスト以外だけでなく、アイコンボタンとして使えるデザインも用意してあります。

シンプルな円

BUTTON

単色背景を付けただけのシンプルな円形の丸ボタンです。

CSS・HTMLコードを表示

<a href="#" class="bt-samp41">BUTTON</a>

a.bt-samp41{
  display: block;
  text-decoration: none;
  height:120px;
  width: 120px;
  line-height: 120px;
  text-align: center;
  color: #fff;
  background: #77b4fd;
  border-radius: 50%;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp41:hover{
  background: #8393ca;
}

実線を付けた円

BUTTON

実線を付ける事でちょっとイメージがかわります。

CSS・HTMLコードを表示

<a href="#" class="bt-samp42">BUTTON</a>

a.bt-samp42{
  display: block;
  text-decoration: none;
  height:120px;
  width: 120px;
  line-height: 120px;
  text-align: center;
  color: #fff;
  background: #77b4fd;
  border: solid 1px rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 0 6px #77b4fd;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp42:hover{
  opacity: 0.5;
  border: solid 1px #77b4fd;
}

縫込み風のデザイン

BUTTON

破線を付けて、糸が縫い込まれているような可愛いデザインのボタンです。cssでborder-widthを調整して線を太くすると可愛さがアップするかもしれません。

CSS・HTMLコードを表示

<a href="#" class="bt-samp43">BUTTON</a>

a.bt-samp43{
  display: block;
  position: relative;
  text-decoration: none;
  height:120px;
  width: 120px;
  line-height: 120px;
  text-align: center;
  color: #fff;
  background: #77b4fd;
  border: dashed 1px rgba(255, 255, 255, 1);
  border-radius: 50%;
  box-shadow: 0 0 0 6px #77b4fd;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp43:hover{
  opacity: 0.5;
  border: solid 1px #77b4fd;
}

実線ボタン(降りてくるエフェクト付き)

BUTTON

実線を付けただけのシンプルデザインのボタンです。ですが、斜め左上から背景が降りてくるホバーエフェクトが付いてます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp44">BUTTON</a>

a.bt-samp44{
  display: block;
  position: relative;
  text-decoration: none;
  height:120px;
  width: 120px;
  line-height: 120px;
  text-align: center;
  color: #0475fb;
  border: solid 1px #0475fb;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}
a.bt-samp44:after{
  content:"";
  position: absolute;
  top: -100%;
  left: -100%;
  background : #0475fb;
  opacity: 0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  z-index: -1;
}
a.bt-samp44:hover{
  color: #fff;
}
a.bt-samp44:hover:after{
  top: 0;
  left: 0;
  height:120px;
  width: 120px;
  border-radius: 50%;
  opacity: 1;
}

バッジ風

BUTTON

CSSのグラデーションとbox-shadowを使い、丸いバッジ風のデザインにしたボタンです。文字はエンボス風にし、裏側から打ち込まれている感じにしてみました。そして少しユニークにしたかったので、ボタンをクリックすると文字がへこむようにしました！

CSS・HTMLコードを表示

<a href="#" class="bt-samp45">BUTTON</a>

a.bt-samp45{
  display: block;
  text-decoration: none;
  height:120px;
  width: 120px;
  line-height: 120px;
  text-align: center;
  color: #008db2;
  border-radius: 50%;
  border:solid 3px #007998;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00b5e5), color-stop(100%, #008db2));
  background: -webkit-linear-gradient(top, #00b5e5, #008db2);
  background: -moz-linear-gradient(top, #00b5e5, #008db2);
  background: -o-linear-gradient(top, #00b5e5, #008db2);
  background: linear-gradient(top, #00b5e5, #008db2);
  background-color: #00a1cb;
  -webkit-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.2);
  text-shadow: -1px -1px rgba(255, 255, 255, 0.5), 1px 1px rgba(0, 0, 0, 0.5);
}
a.bt-samp45:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}

アイコンボタン

スマホサイトやwebサイトなどで使えそうな、デバイス風のリアルなボタンです。font awesomeのwebフォントを使用していますが、アイコンを変えたい場合はHTMLのiタグのclass名を変更すれば変わります。

CSS・HTMLコードを表示

<a href="#" class="bt-samp46"><i class="fa fa-home"></i></a>

a.bt-samp46,
a.bt-samp46:hover,
a.bt-samp46:visited{
  display: block;
  position: relative;
  height: 120px;
  width: 120px;
  padding-left:1px;
  text-decoration: none;
  line-height: 120px;
  text-align: center;
  color: #b9b4b2;
  font-size: 40px;
  text-shadow: 0px 1px 0px #fafafa;
  background: #e4e3e2;
  background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#d3cecd));
  background: -moz-linear-gradient(top,  #eaeaea,  #d3cecd);
  background: -o-linear-gradient(top,  #eaeaea,  #d3cecd);
  background: -ms-linear-gradient(top,  #eaeaea,  #d3cecd);
  background: linear-gradient(top,  #eaeaea,  #d3cecd);
  border: 1px solid #dcd9d8;
  border-bottom: 1px solid #c1c1bd;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 2px 1px rgba(255,255,255,0.6), 0 0 1px #c7c5c1;
  -moz-box-shadow: inset 0 2px 1px rgba(255,255,255,0.6), 0 0 1px #c7c5c1;
  box-shadow: inset 0 2px 1px rgba(255,255,255,0.6), 0 0 1px #c7c5c1;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}
a.bt-samp46:hover { /* マウスオーバー時 */
  background: #eaeaea;
  background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#e4e3e2));
  background: -moz-linear-gradient(top,  #eaeaea,  #e4e3e2);
  background: -o-linear-gradient(top,  #eaeaea,  #e4e3e2);
  background: -ms-linear-gradient(top,  #eaeaea,  #e4e3e2);
  background: linear-gradient(top,  #eaeaea,  #e4e3e2);
  -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
  border-bottom:none;
}
a.bt-samp46:active { /* クリック時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

周囲を凹ませたアイコンボタン

アイコンボタンの周囲を凹ませて、よりリアルな感じにしたデザインです。回りが窪んでいる事で、押せる感じがあるボタンになってます。それとCSSはあまり変更していませんが、HTMLにはdivタグを追加する必要があります。

CSS・HTMLコードを表示

<div class="bt4">
  <a href="#" class="bt-samp47"><i class="fa fa-apple"></i></a>
</div>

div.bt4{
  padding:10px;
  height: 120px;
  width: 120px;
  background: #fbfaf4;
  background: -webkit-gradient(linear, left top, left bottom, from(#e3dfde), to(#fbfaf4));
  background: -moz-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: -o-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: -ms-linear-gradient(top,  #e3dfde,  #fbfaf4);
  background: linear-gradient(top,  #e3dfde,  #fbfaf4);
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%;
  border-radius: 50%;
}
a.bt-samp47,
a.bt-samp47:hover,
a.bt-samp47:visited{
  display: block;
  position: relative;
  height: 120px;
  width: 120px;
  padding-left:1px;
  text-decoration: none;
  line-height: 120px;
  text-align: center;
  color: #b9b4b2;
  font-size: 40px;
  text-shadow: 0px 1px 0px #fafafa;
  background: #e4e3e2;
  background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#d3cecd));
  background: -moz-linear-gradient(top,  #eaeaea,  #d3cecd);
  background: -o-linear-gradient(top,  #eaeaea,  #d3cecd);
  background: -ms-linear-gradient(top,  #eaeaea,  #d3cecd);
  background: linear-gradient(top,  #eaeaea,  #d3cecd);
  border: 1px solid #dcd9d8;
  border-bottom: 1px solid #c1c1bd;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 2px 1px rgba(255,255,255,0.6), 0 0 1px #c7c5c1;
  -moz-box-shadow: inset 0 2px 1px rgba(255,255,255,0.6), 0 0 1px #c7c5c1;
  box-shadow: inset 0 2px 1px rgba(255,255,255,0.6), 0 0 1px #c7c5c1;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}
a.bt-samp47:hover { /* マウスオーバー時 */
  background: #eaeaea;
  background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#e4e3e2));
  background: -moz-linear-gradient(top,  #eaeaea,  #e4e3e2);
  background: -o-linear-gradient(top,  #eaeaea,  #e4e3e2);
  background: -ms-linear-gradient(top,  #eaeaea,  #e4e3e2);
  background: linear-gradient(top,  #eaeaea,  #e4e3e2);
  -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
  border-bottom:none;
}
a.bt-samp47:active { /* クリック時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

切り替え/矢印ボタン

ページネーションやon/offなどの切替えに使えるデザインのボタン一覧です。

戻る次へボタン

矢印型の戻る・次へボタンです。ページネーションやブログなどの次・前の記事へ進む場面で使えます。ちなみにデザインの三角形の部分は疑似要素と使用して作成しています。

CSS・HTMLコードを表示

<ul class="bt-samp48 clearfix48">
  <li class="bt-samp48-prev"><a href="#">戻る</a></li>
  <li class="bt-samp48-next"><a href="#">次へ</a></li>
</ul>

ul.bt-samp48{
  padding:0;
  width: 100px;
}
.bt-samp48-prev{  /* 戻るボタン */
  display: block;
  float: left;
  width:35px;
}
.bt-samp48-prev a{
  display:block;
  position: absolute;
  margin-left: 10px;
  width:35px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  z-index: 5;
  line-height:26px;
  padding:0 10px;
  margin-top:-15px;
}
.bt-samp48-prev a:before {
  content: "";
  display: block;
  position: absolute;
  left: 4px;
  top: 0;
  width: 17px;
  height: 17px;
  -webkit-transform-origin: left top;
  -webkit-transform: rotate(45deg);
  -moz-transform-origin: left top;
  -moz-transform: rotate(45deg);
  transform-origin: left top;
  transform: rotate(45deg);
  background: #0d5287;
  border-left-color: #0d5287;
  border-bottom-color: #0d5287;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  border-right: none;
  border-top: none;
  z-index: -1;
}
.bt-samp48-prev a:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 55px;
  height: 23px;
  background: #0d5287;
  border-top-color: #0d5287;
  border-right-color: #0d5287;
  border-bottom-color: #0d5287;
  border-width: 1px;
  border-style: solid;
  border-radius: 7px;
  border-left: none;
  z-index: -2;
}
.bt-samp48-prev:hover a:before{  /* 戻るボタンマウスオーバー時 */
  background: #0585e8;
  border-color: #0585e8;
}
.bt-samp48-prev:hover a:after{
  background: #0585e8;
  border-color: #0585e8;
}
.bt-samp48-next{  /* 次へボタン */
  display: block;
  float: right;
  width:35px;
}
.bt-samp48-next a{
  display:block;
  position: absolute;
  width:35px;
  margin-left: 10px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  z-index: 5;
  line-height:26px;
  padding:0 15px 0 5px;
  margin-top:-15px;
}
.bt-samp48-next a:before {
  content: "";
  display: block;
  position: absolute;
  left: -8px;
  top: 0;
  width: 54px;
  height: 23px;
  background: #0d5287;
  border-top-color: #0d5287;
  border-left-color: #0d5287;
  border-bottom-color: #0d5287;
  border-width: 1px;
  border-style: solid;
  border-radius: 7px;
  border-right: none;
  z-index: -1;
}
.bt-samp48-next a:after {
  content: "";
  display: block;
  position: absolute;
  left: 44px;
  top: 0;
  width: 17px;
  height: 17px;
  -webkit-transform-origin: left top;
  -webkit-transform: rotate(45deg);
  -moz-transform-origin: left top;
  -moz-transform: rotate(45deg);
  transform-origin: left top;
  transform: rotate(45deg);
  background: #0d5287;
  border-top-color: #0d5287;
  border-right-color: #0d5287;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  border-left: none;
  border-bottom: none;
  z-index: -2;
} 
.bt-samp48-next:hover a:before{  /* 次へボタンマウスオーバー時 */
  background: #0585e8;
  border-color: #0585e8;
}
.bt-samp48-next:hover a:after{
  background: #0585e8;
  border-color: #0585e8;
}
.clearfix48:after{  /* 回り込み解除 */
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

on/off切り替えボタン

オン/オフが切り替えられるようなデザインのボタンです。

CSS・HTMLコードを表示

<ul class="bt-samp49 clearfix48">
  <li><a href="#">on</a></li>
  <li><a href="#" class="bt-samp49-off">off</a></li>
</ul>

.bt-samp49{
  width:142px;
  padding:5px 0 5px 5px;
  background:#365982;
  border-radius: 5px;
  -webkit-box-shadow:  0 1px 3px #314f73 inset;
  -moz-box-shadow:  0 1px 3px #314f73 inset;
  box-shadow:  0 1px 3px #314f73 inset;
}
.bt-samp49 li{
  display: block;
  float: left;
  position: relative;
  height: 30px;
  width: 65px;
  margin: 0 5px 0 0; 
}
.bt-samp49 li a,
.bt-samp49 li a:hover,
.bt-samp49 li a:visited{
  display: block;
  position: relative;
  height: 29px;
  width: 65px;
  padding-left:1px;
  text-decoration: none;
  line-height: 29px;
  text-align: center;
  border-top:1px solid #8cadcb;
  border-bottom:1px solid #5076a0;
  color: #416d9c;
  font-size: 19px;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.5), 1px 1px rgba(0, 0, 0, 0.3);
  background: #5f8bb6;
  background: -webkit-gradient(linear, left top, left bottom, from(#5f8bb6), to(#416d9c));
  background: -moz-linear-gradient(top,  #5f8bb6,  #416d9c);
  background: -o-linear-gradient(top,  #5f8bb6,  #416d9c);
  background: -ms-linear-gradient(top,  #5f8bb6,  #416d9c);
  background: linear-gradient(top,  #5f8bb6,  #416d9c);
  -webkit-box-shadow:  0 1px 1px #314f73;
  -moz-box-shadow:  0 1px 1px #314f73;
  box-shadow:  0 1px 1px #314f73;
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.bt-samp49 li a:hover,
.bt-samp49 li a:active,
.bt-samp49 li a.bt-samp49-off{
  color: #396593;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  border-top:1px solid #7390b5;
  border-bottom:1px solid #577da9;
  background: #436b9c;
  background: -webkit-gradient(linear, left top, left bottom, from(#436b9c), to(#4471a0));
  background: -moz-linear-gradient(top,  #436b9c,  #4471a0);
  background: -o-linear-gradient(top,  #436b9c,  #4471a0);
  background: -ms-linear-gradient(top,  #436b9c,  #4471a0);
  background: linear-gradient(top,  #436b9c,  #4471a0);
}
.clearfix48:after{  /* 回り込み解除 */
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

on/off切り替えボタン(角丸タイプ)

角丸にしたon/off切り替えボタンです。

CSS・HTMLコードを表示

<ul class="bt-samp50 clearfix48">
  <li><a href="#">on</a></li>
  <li><a href="#" class="bt-samp50-off">off</a></li>
</ul>

.bt-samp50{
  width:142px;
  padding:5px 0 5px 5px;
  background:#365982;
  border-radius: 20px;
  -webkit-box-shadow:  0 1px 3px #314f73 inset;
  -moz-box-shadow:  0 1px 3px #314f73 inset;
  box-shadow:  0 1px 3px #314f73 inset;
}
.bt-samp50 li{
  display: block;
  float: left;
  position: relative;
  height: 30px;
  width: 65px;
  margin: 0 5px 0 0; 
}
.bt-samp50 li a,
.bt-samp50 li a:hover,
.bt-samp50 li a:visited{
  display: block;
  position: relative;
  height: 29px;
  width: 65px;
  padding-left:1px;
  text-decoration: none;
  line-height: 29px;
  text-align: center;
  border-top:1px solid #8cadcb;
  border-bottom:1px solid #5076a0;
  color: #416d9c;
  font-size: 19px;
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.5), 1px 1px rgba(0, 0, 0, 0.3);
  background: #5f8bb6;
  background: -webkit-gradient(linear, left top, left bottom, from(#5f8bb6), to(#416d9c));
  background: -moz-linear-gradient(top,  #5f8bb6,  #416d9c);
  background: -o-linear-gradient(top,  #5f8bb6,  #416d9c);
  background: -ms-linear-gradient(top,  #5f8bb6,  #416d9c);
  background: linear-gradient(top,  #5f8bb6,  #416d9c);
  -webkit-box-shadow:  0 1px 1px #314f73;
  -moz-box-shadow:  0 1px 1px #314f73;
  box-shadow:  0 1px 1px #314f73;
  -webkit-border-radius: 20px; 
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.bt-samp50 li a:hover,
.bt-samp50 li a:active,
.bt-samp50 li a.bt-samp50-off{
  color: #396593;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  border-top:1px solid #7390b5;
  border-bottom:1px solid #577da9;
  background: #436b9c;
  background: -webkit-gradient(linear, left top, left bottom, from(#436b9c), to(#4471a0));
  background: -moz-linear-gradient(top,  #436b9c,  #4471a0);
  background: -o-linear-gradient(top,  #436b9c,  #4471a0);
  background: -ms-linear-gradient(top,  #436b9c,  #4471a0);
  background: linear-gradient(top,  #436b9c,  #4471a0);
}
.clearfix48:after{  /* 回り込み解除 */
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

連結された切り替えボタン

2つのボタンが連結されたようなデザインです。こちらもクリックでエンボス風の文字が凹みます。

CSS・HTMLコードを表示

<ul class="bt-samp51 clearfix48">
  <li><a href="#">on</a></li>
  <li><a href="#" class="bt-samp51-off">off</a></li>
</ul>

.bt-samp51{
  width: 162px;
  padding: 0;
}
.bt-samp51 li{
  display: block;
  float: left;
  position: relative;
  height: 37px;
  width: 80px;
}
.bt-samp51 a{
  display: block;
  position: relative;
  height: 35px;
  width: 78px;
  line-height:35px;
  padding-left:1px;
  text-decoration: none;
  color:#bdbbbb;
  font-weight: bold;
  border:1px solid #ccc;
  text-align:center;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.5), 1px 1px rgba(0, 0, 0, 0.3);
  background: #fefefe;
  background: -moz-linear-gradient(top, #fefefe2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  background: -webkit-linear-gradient(top, #fefefe 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
  background: linear-gradient(to bottom, #fefefe 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#fefefe',GradientType=0 );
}
.bt-samp51 li:first-child,
.bt-samp51 li:first-child a{
  border-radius: 5px 0 0 5px;
}
.bt-samp51 li:last-child,
.bt-samp51 li:last-child a{
  border-radius: 0 5px 5px 0;
}
.bt-samp51 a.bt-samp51-off,
.bt-samp51 a:hover {
  color:#b90101;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
  border:1px solid #b50130;
  background: #cf0404;
  background: -moz-linear-gradient(top, #cf0404 0%, #ed1804 100%);
  background: -webkit-linear-gradient(top, #cf0404 0%,#ed1804 100%);
  background: linear-gradient(to bottom, #cf0404 0%,#ed1804 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf0404', endColorstr='#ed1804',GradientType=0 );
}
.clearfix48:after{  /* 回り込み解除 */
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

可愛いアニメーションボタン

デザインが可愛いくて、アニメーションエフェクト付きのボタン一覧です。

ふんわりした可愛いデザイン

BUTTON

ふんわりした感じの可愛い系のボタンです。マウスホバーで文字が移動し、アイコンがぼかされます。またボタンのアニメーションは、全てCSSのみで再現しています。

※Internet Explorerの場合、ホバー時にアイコン部分が消えます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp52"><i class="fa fa-github-alt"></i><span>BUTTON</span></a>

a.bt-samp52 {
  display: block;
  position: relative;
  background: #c4f0fc;
  border: 7px solid #ffffff;
  border-radius: 50px;
  box-shadow: 0px 0px 4px rgba(0,0,0,0.1),1px 2px 3px rgba(0,0,0,0.1), inset 1px 1px 7px rgba(255,255,255,0.7), inset -1px -1px 7px rgba(255,255,255,0.7);
  width: 200px;
  height: 60px;
  overflow: hidden;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
a.bt-samp52 i{
  position: absolute;
  left: 20px;
  top: 0px;
  color: #ffffff;
  font-size: 40px;
  text-shadow: 1px 1px 1px #84d3e8;
  line-height: 58px;
  width: 100%;
  height: 50%;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
a.bt-samp52 span{
  position: absolute;
  top: 32%;
  left: 70px;
  width: 100%;
  height: 50%;
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 1px #84d3e8;
}
a.bt-samp52:hover{
  background: #fbaf5d;
}
a.bt-samp52:hover i{
  text-shadow: 1px 1px 4px #fff, -1px -1px 4px #fff;
  color: transparent;
}
a.bt-samp52:hover span{
  text-shadow: none;
  -webkit-animation: text-anime52 0.5s ease;
  animation: text-anime52 0.5s ease;
}
@-webkit-keyframes text-anime52 {
	0% { -webkit-transform: translateX(100px);}
	50% { -webkit-transform: translateX(-10px);}
	100% { -webkit-transform: translateX(0px);}
}
@keyframes text-anime52 {
	0% { transform: translateX(100px);}
	50% { transform: translateX(-10px);}
	100% { transform: translateX(0px);}
}

ふんわりした可愛いデザイン(タイプ2)

BUTTON

ボタンをクリックした時に押せるように設定し、ホバー時のアニメーションを変更したタイプです。

※Internet Explorerの場合、ホバー時にアイコン部分が消えます。

CSS・HTMLコードを表示

<a href="#" class="bt-samp53"><i class="fa fa-paw"></i><span>BUTTON</span></a>

a.bt-samp53 {
  display: block;
  position: relative;
  background: #ffcccc;
  border: 7px solid #ffffff;
  border-radius: 50px;
  box-shadow: 0px 0px 4px rgba(0,0,0,0.1),1px 2px 3px rgba(0,0,0,0.1), inset 1px 1px 7px rgba(255,255,255,0.7), inset -1px -1px 7px rgba(255,255,255,0.7);
  width: 200px;
  height: 60px;
  overflow: hidden;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
a.bt-samp53 i{
  position: absolute;
  left: 20px;
  top: 0px;
  color: #ffffff;
  font-size: 40px;
  text-shadow: 1px 0px 1px rgba(255,255,255,0.6);
  line-height: 58px;
  width: 100%;
  height: 50%;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
a.bt-samp53 span{
  position: absolute;
  top: 32%;
  left: 70px;
  width: 100%;
  height: 50%;
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 1px #bf9999;
}
a.bt-samp53:hover{
  background: #ffb2b2;
}
a.bt-samp53:hover i{
  text-shadow: 1px 1px 4px #fff, -1px -1px 4px #fff;
  color: transparent;
}
a.bt-samp53:hover span{
  text-shadow: 1px 1px 2px #bf9999;
  -webkit-animation: text-anime53 0.5s ease;
  animation: text-anime53 0.5s ease;
}
@-webkit-keyframes text-anime53 {
	0% { -webkit-transform: translate(100px,50px);}
	50% { -webkit-transform: translate(-10,-10px);}
	100% { -webkit-transform: translate(0px);}
}
@keyframes text-anime53 {
	0% { transform: translate(100px,50px);}
	50% { transform: translate(-10px,-10px);}
	100% { transform: translate(0px);}
}
a.bt-samp53:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow:none;
}

扉のように開くボタン

BUTTON

Enter text here

マウスホバーするとパカッと扉のように表面が開くデザインの可愛いボタンです。cssのアニメーションを使い、ホバーで角度を傾けて開いているように見せています。表面がめくれる角度はtransform: rotate(65deg);の数値を変更すると調整できます。またボタンの表面にアイコン、中身にテキストを表示していますが、アイコンの代わりにhtmlのタイトルタグなどを使う事もできます。ただしその場合はCSSを一部変更する必要があります。

CSS・HTMLコードを表示

<a href="#" class="bt-samp54">
  <div>
    <i class="fa fa-github-alt"></i>
    <span>BUTTON</span>
  </div>
  <p>Enter text here</p>
</a>

a.bt-samp54{
  display: block;
  text-decoration:none;
  position: relative;
  width: 172px;
  height: 172px;
}
a.bt-samp54:before{
  content: "";
  position: absolute;
  top: -10px;
  right: -25px;
  border-radius: 10px;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.5), inset 0 -1px 3px rgba(0,0,0,0.2);
  width: 20px;
  height: 20px;
  background: #acd373;
  z-index: 10;
}
a.bt-samp54 div{
  position: absolute;
  top: 0;
  border-radius: 90px 0 90px 0px / 90px 0 90px 0px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 40px 15px #fff;
  position: absolute;
  height: 172px;
  width: 172px;
  display: block;
  border: 10px solid #d1eaac;
  background: #e1f1c9;
  color: #acd373;
  -webkit-transform-origin: 97% 0;
  transform-origin: 97% 0;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
a.bt-samp54:hover div{
  -webkit-transform: rotate(65deg);
  transform: rotate(65deg);
  z-index: 5;
}
a.bt-samp54 div i{
  position: absolute;
  top: 35%;
  left: 0;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
a.bt-samp54 div span{
  position: absolute;
  top: 65%;
  left: 0;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
a.bt-samp54 p{
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
  width: 112px;
  height: 96px;
  padding: 60px 30px 20px;
  background: #bfe289;
  border: 10px solid #fff;
  border-radius: 90px 0 90px 0px / 90px 0 90px 0px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

扉のように開くボタン(四角)

BUTTON

Enter text here

四角にしてみたデザインです。四角だと可愛さはあまりなくなりますが、使い勝手はいいかもしれません。

CSS・HTMLコードを表示

<a href="#" class="bt-samp55">
  <div>
    <i class="fa fa-amazon"></i>
    <span>BUTTON</span>
  </div>
  <p>Enter text here</p>
</a>

a.bt-samp55{
  display: block;
  text-decoration:none;
  position: relative;
  width: 172px;
  height: 172px;
}
a.bt-samp55:before{
  content: "";
  position: absolute;
  top: -10px;
  right: -25px;
  border-radius: 10px;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.5), inset 0 -1px 3px rgba(0,0,0,0.2);
  width: 20px;
  height: 20px;
  background: #ffc833;
  z-index: 10;
}
a.bt-samp55 div{
  position: absolute;
  top: 0;
  box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 40px 15px #fff;
  position: absolute;
  height: 172px;
  width: 172px;
  display: block;
  border: 10px solid #ffd800;
  background: #fff4b5;
  color: #ffd119;
  -webkit-transform-origin: 97% 0;
  transform-origin: 97% 0;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
a.bt-samp55:hover div{
  -webkit-transform: rotate(75deg);
  transform: rotate(75deg);
  z-index: 5;
}
a.bt-samp55 div i{
  position: absolute;
  top: 35%;
  left: 0;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
a.bt-samp55 div span{
  position: absolute;
  top: 65%;
  left: 0;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
a.bt-samp55 p{
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
  width: 112px;
  height: 96px;
  padding: 60px 30px 20px;
  background: #ffc833;
  border: 10px solid #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

スライム風

BUTTON

スライムのような「ぷにぷに」した可愛いデザインのボタンです。一見ランダムな形に見えますが、マウスオーバーでモーフィングし、ボタンの形状が四角に変わります。またチェック背景が変化する様子も面白いので、楽しめる演出をしたい時にオススメ。
ちなみにhtml・cssはかなり単純なため、ボタンの調整も簡単です。

CSS・HTMLコードを表示

<a href="#" class="bt-samp56">BUTTON</a>

a.bt-samp56{
  display: block;
  height: 100px;
  width: 180px;
  font-family: 'Franklin Gothic Medium', sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: #FFF;
  padding-top: 70px;
  text-align: center;
  text-shadow: 0 0 10px #f28f8f, 0 0 5px #f28f8f, 0 0 3px #f28f8f, 0 0 2px #f28f8f;
  box-shadow: 0px 0px 30px 0px #f28f8f inset, 0px 0px 8px 0px rgba(0,0,0,0.3);
  border-radius: 200px 240px 210px 150px;
  background-color: #ffdfdf;
  background-image: -webkit-linear-gradient(45deg,  #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%),
                    -webkit-linear-gradient(-135deg, #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%);
  background-image: linear-gradient(45deg,  #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%),
                    linear-gradient(-135deg, #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%);
  -webkit-background-size: 60px 60px;
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
a.bt-samp56:hover{
  background-position: top;
  cursor: pointer;
  border-radius: 5px;
}

マウスホバーでアイコンが回転

BUTTON

ボタンにマウスホバーでアイコンが回転します。あとボタン自体も少し浮き上がるようになってます。シンプル+可愛さのあるデザインが欲しい時に最適です。

CSS・HTMLコードを表示

<a href="#" class="bt-samp57"><i class="fa fa-android"></i><span>BUTTON</span></a>

a.bt-samp57{
  display: block;
  position: relative;
  width:200px;
  height: 40px;
  padding-left: 50px;
  color: #fff;
  text-decoration: none;
  border: 1px solid #f79621;
  background: #f9c667;
  background: -moz-linear-gradient(-45deg, #f9c667 0%, #f79621 100%); 
  background: -webkit-linear-gradient(-45deg, #f9c667 0%,#f79621 100%); 
  background: linear-gradient(135deg, #f9c667 0%,#f79621 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=1 );
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.3);
  border-radius: 20px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
a.bt-samp57 i{
  position: absolute;
  top: 7px;
  left: 18px;
  font-size:25px;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
a.bt-samp57 span{
  display:block;
  font-size:17px;
  font-weight: bold;
  line-height:42px;
}
a.bt-samp57:hover{
  -webkit-transform:scale(1.05);
  transform:scale(1.05);
  background-position: bottom;
}
a.bt-samp57:hover i{
  -webkit-transform:rotateY(-180deg);
  transform:rotateY(-180deg);
}

SNSボタン

ツイッター、フェイスブックなどのソーシャルシェアボタンやフォローボタンの一覧です。 ブログなどで良く使われているSNS全般のデザインを掲載していきます。

なおsnsのアイコンにはfont awesomeのアイコンフォントを使用しています

シンプルなSNSボタン

Twitter Facebook Google+ Pocket B! Hatena RSS Pin it

SNSのシンプルなシェアボタンです。ブログでたまに見かけるデザインだったので作ってみました。すごいシンプルですけど、ちょっとオシャレな気がするので、良ければ使って見て下さい。

CSS・HTMLコードを表示

<a href="#" class="bt-samp58 bt-samp58-tw"><i class="fa fa-twitter"></i> <span>Twitter</span></a>    
<a href="#" class="bt-samp58 bt-samp58-fb"><i class="fa fa-facebook"></i> <span>Facebook</span></a>   
<a href="#" class="bt-samp58 bt-samp58-google"><i class="fa fa-google-plus"></i> <span>Google+</span></a>
<a href="#" class="bt-samp58 bt-samp58-pocket"><i class="fa fa-get-pocket"></i> <span>Pocket</span></a>
<a href="#" class="bt-samp58 bt-samp58-hatena">B! <span>Hatena</span></a>
<a href="#" class="bt-samp58 bt-samp58-rss"><i class="fa fa-rss"></i> <span>RSS</span></a>
<a href="#" class="bt-samp58 bt-samp58-pin"><i class="fa fa-pinterest"></i> <span>Pin it</span></a>

a.bt-samp58{  /* 全ボタン共通設定 */
  display: inline-block;
  height: 30px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 15px;
  line-height: 32px;
  overflow: hidden;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp58-tw{  /* ツイッター */
  width: 85px;
  background: #55ACEE;
}
a.bt-samp58-fb{ /* フェイスブック */
  width: 95px;
  background: #3B5998;
}
a.bt-samp58-google{  /* グーグルプラス */
  width: 95px;
  background: #DD4B39;
}
a.bt-samp58-pocket{  /* pocket */
  width: 75px;
  background: #EE4257;
}
a.bt-samp58-hatena{  /* はてぶ */
  width: 80px;
  background: #3C7DD1;
  font-weight: bold;
}
a.bt-samp58-hatena span{
  font-weight: normal;
}
a.bt-samp58-rss{  /* RSS */
  width: 60px;
  background: #FFB53C;
}
a.bt-samp58-pin{  /* pin it */
  width: 65px;
  background: #D4121C;
}
a.bt-samp58:hover{
  opacity: 0.5;
}

シンプルなsnsボタン(角丸)

B!

ブログですっごいよく見かけるデザインのSNSボタンです。

CSS・HTMLコードを表示

<a href="#" class="bt-samp59 bt-samp59-tw"><i class="fa fa-twitter"></i></a>    
<a href="#" class="bt-samp59 bt-samp59-fb"><i class="fa fa-facebook"></i></a>   
<a href="#" class="bt-samp59 bt-samp59-google"><i class="fa fa-google-plus"></i></a>
<a href="#" class="bt-samp59 bt-samp59-pocket"><i class="fa fa-get-pocket"></i></a>
<a href="#" class="bt-samp59 bt-samp59-hatena">B!</a>
<a href="#" class="bt-samp59 bt-samp59-rss"><i class="fa fa-rss"></i></a>
<a href="#" class="bt-samp59 bt-samp59-pin"><i class="fa fa-pinterest"></i></a>

a.bt-samp59{
  display: inline-block;
  height: 45px;
  width: 45px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  line-height: 47px;
  overflow: hidden;
  border-radius: 10px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp59-tw{  /* ツイッター */
  background: #55ACEE;
}
a.bt-samp59-fb{ /* フェイスブック */
  background: #3B5998;
}
a.bt-samp59-google{  /* グーグルプラス */
  background: #DD4B39;
}
a.bt-samp59-pocket{  /* pocket */
  background: #EE4257;
}
a.bt-samp59-hatena{  /* はてぶ */
  background: #3C7DD1;
  font-weight: bold;
}
a.bt-samp59-rss{  /* RSS */
  background: #FFB53C;
}
a.bt-samp59-pin{  /* pin it */
  background: #D4121C;
}
a.bt-samp59:hover{
  opacity: 0.5;
}

立体的なSNSボタン

B!

押せるような感じが出てる立体的なSNSボタンです。上のデザインとほぼ変わりませんが、マウスホバーで立体的な部分が窪み、フラットになります。

CSS・HTMLコードを表示

<a href="#" class="bt-samp60 bt-samp60-tw"><i class="fa fa-twitter"></i></a>    
<a href="#" class="bt-samp60 bt-samp60-fb"><i class="fa fa-facebook"></i></a>   
<a href="#" class="bt-samp60 bt-samp60-google"><i class="fa fa-google-plus"></i></a>
<a href="#" class="bt-samp60 bt-samp60-pocket"><i class="fa fa-get-pocket"></i></a>
<a href="#" class="bt-samp60 bt-samp60-hatena">B!</a>
<a href="#" class="bt-samp60 bt-samp60-rss"><i class="fa fa-rss"></i></a>
<a href="#" class="bt-samp60 bt-samp60-pin"><i class="fa fa-pinterest"></i></a>

a.bt-samp60{
  display: inline-block;
  height: 45px;
  width: 45px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  line-height: 47px;
  overflow: hidden;
  box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.3), inset 0 -2px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a.bt-samp60-tw{  /* ツイッター */
  background: #55ACEE;
  border: solid 4px #55ACEE;
}
a.bt-samp60-fb{ /* フェイスブック */
  background: #3B5998;
  border: solid 4px #3B5998;
}
a.bt-samp60-google{  /* グーグルプラス */
  background: #DD4B39;
  border: solid 4px #DD4B39;
}
a.bt-samp60-pocket{  /* pocket */
  background: #EE4257;
  border: solid 4px #EE4257;
}
a.bt-samp60-hatena{  /* はてぶ */
  background: #3C7DD1;
  font-weight: bold;
  border: solid 4px #3C7DD1;
}
a.bt-samp60-rss{  /* RSS */
  background: #FFB53C;
  border: solid 4px #FFB53C;
}
a.bt-samp60-pin{  /* pin it */
  background: #D4121C;
  border: solid 4px #D4121C;
}
a.bt-samp60:hover{
  box-shadow: none;
}

丸いsnsボタン

丸い形状のSNSボタンです。ホバーでSNSアイコンがクルッと回るCSSのエフェクトが付いてます。そしてアクティブでボタンがフラットになります。ちなみにハテブはアイコンを用意してなかったので、省略しました。

CSS・HTMLコードを表示

<a href="#" class="bt-samp61 bt-samp61-tw"><i class="fa fa-twitter"></i></a>    
<a href="#" class="bt-samp61 bt-samp61-fb"><i class="fa fa-facebook"></i></a>   
<a href="#" class="bt-samp61 bt-samp61-google"><i class="fa fa-google-plus"></i></a>
<a href="#" class="bt-samp61 bt-samp61-pocket"><i class="fa fa-get-pocket"></i></a>
<a href="#" class="bt-samp61 bt-samp61-rss"><i class="fa fa-rss"></i></a>
<a href="#" class="bt-samp61 bt-samp61-pin"><i class="fa fa-pinterest"></i></a>

a.bt-samp61{
  display: inline-block;
  height: 45px;
  width: 45px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  line-height: 47px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.3), inset 0 -2px 0px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.3);
}
a.bt-samp61-tw{  /* ツイッター */
  background: #55ACEE;
  border: solid 4px #55ACEE;
}
a.bt-samp61-fb{ /* フェイスブック */
  background: #3B5998;
  border: solid 4px #3B5998;
}
a.bt-samp61-google{  /* グーグルプラス */
  background: #DD4B39;
  border: solid 4px #DD4B39;
}
a.bt-samp61-pocket{  /* pocket */
  background: #EE4257;
  border: solid 4px #EE4257;
}
a.bt-samp61-rss{  /* RSS */
  background: #FFB53C;
  border: solid 4px #FFB53C;
}
a.bt-samp61-pin{  /* pin it */
  background: #D4121C;
  border: solid 4px #D4121C;
}
a.bt-samp61 i{
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  background-position: bottom;
}
a.bt-samp61:hover i{
  -webkit-transform:rotateY(-360deg);
  transform:rotateY(-360deg);
}
a.bt-samp61:active{
  box-shadow: none;
}

まとめ

CSSボタンのデザイン一覧でしたが、いかがでしたか。 CSSで再現できるボタンデザインは下記のページでも紹介しているので、よろしければご覧ください。

CSSボタンのオシャレなデザインとエフェクトまとめ
CSSボタンのオシャレなデザインとエフェクトまとめ
CSSとHTMLだけで実現できるCSSボタンのデザインとhoverエフェクトのサンプルです。 HTMLとCSS...
www.yuu-diaryblog.com
2017-03-22 15:56

またul・olタグを使用するリストデザインや見出しのデザインサンプルも作成してみたので、参考にして頂ければ幸いです。

CSSで作るオシャレな見出しデザイン31選
CSSで作るオシャレな見出しデザイン31選
ブログやwebサイトをカスタマイズする時、意外に悩むのが見出しのデザインですよね。 オシャレで可愛く、もしくはカッ...
www.yuu-diaryblog.com
2017-02-12 06:33
CSSで作るリストデザイン30選！オシャレな箇条書きを実現
CSSで作るリストデザイン30選！オシャレな箇条書きを実現
出典 : Designed by Freepik HTMLのul、ol、liタグとCSSを使ったリスト(箇...
www.yuu-diaryblog.com
2017-03-14 05:57

ゆう。

トップページへ戻る