ボタンと囲み文字

ファンクションキー風の囲み表示

　Chromeでどこかのページを表示した状態で F12キー（Windowsの場合)。
Macの場合はCommand＋Option＋Iキー）を押すと、
デベロッパーツールが表示される。

CODE
HTML 

   <p style="line-height:2;">
    　<kbb>Chrome</kbb>でどこかのページを表示した状態で
    <kbg>F12</kbg>キー（<kbr>Windows</kbr>の場合)。<br />
    Macの場合は<kbg>Command</kbg>＋<kbg>Option</kbg>＋<kbg>I</kbg>キー）を押すと、
    <br />
    <kby>デベロッパーツール</kby>が表示される。<br />
   </p>
CSS 

ol kbr,p kbr,ul kbr{
	padding:2px 4px;
	margin:0 2px;
	white-space:nowrap;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif!important;
	background-color:#ffd5d5;
	border:1px solid #ff5555;
	border-radius:5px
}
ol kbg,p kbg,ul kbg{padding:2px 4px;
	margin:0 2px;
	white-space:nowrap;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif!important;
	background-color:#DEC;
	border:1px solid #5A5;
	border-radius:5px
}
ol kbb,p kbb,ul kbb{padding:2px 4px;
	margin:0 2px;
	white-space:nowrap;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif!important;
	background-color:#d5eaff;
	border:1px solid #0055aa;
	border-radius:5px
}
ol kby,p kby,ul kby{padding:2px 4px;
	margin:0 2px;
	white-space:nowrap;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif!important;
	background-color:#ffffd5;
	border:1px solid #aaaa00;
	border-radius:5px
}

ボタン

申込む 申込む 申込む1 エラーmsg 返済例

CODE
HTML 

   <a class="btn3P" onclick="formopen("アナウンサー養成　基礎科","1601","火曜1830クラス"); return false" href="javascript:void(0)">申込む</a> 
   <a class="btn3B" onclick="formopen("アナウンサー養成　基礎科","1601","火曜1830クラス"); return false" href="javascript:void(0)">申込む</a> 
   <a class="btn3G" onclick="msg2('メッセージのタイトル','<p><kbg>Ctrl</kbg>＋<kbg>Alt</kbg>＋<kbg>c</kbg>または<kbr>Ctrl</kbr>＋<kbr>Alt</kbr>＋<kbr>h</kbr>で請求書の一部を修正できます。<br />'); return false" href="javascript:void(0)">申込む1</a> 
   <a class="btn3G" onclick="errMsg('アナウンサー養成　基礎科','1601'); return false" href="javascript:void(0)">エラーmsg</a> 
   
   <a href="javascript:void(0);" class="btn4" onClick="loanDisp()">返済例</a>
CSS 

.btn3P {
	-moz-box-shadow: 5px 7px 14px 1px #fbafe3;
	-webkit-box-shadow: 5px 7px 14px 1px #fbafe3;
	box-shadow: 5px 7px 14px 1px #fbafe3;
	background-color:#ff5bb0;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #ee1eb5;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:16px;
	font-weight:bold;
	padding:2px 4px;
	text-decoration:none;
}
.btn3P:hover {
	background-color:#ef027d;
	color:#ffffff;
	text-decoration:none;
}
.btn3P:active {
	position:relative;
	top:1px;
}
.btn3B {
	-moz-box-shadow: 5px 7px 14px 1px #00bfff;
	-webkit-box-shadow: 5px 7px 14px 1px #00bfff;
	box-shadow: 5px 7px 14px 1px #87cefa;
	background-color:#0000ff;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #191970;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:16px;
	font-weight:bold;
	padding:2px 4px;
	text-decoration:none;
}
.btn3B:hover {
	background-color:#0000cd;
	color:#ffffff;
	text-decoration:none;
}
.btn3B:active {
	position:relative;
	top:1px;
}
.btn3G {
	-moz-box-shadow: 5px 7px 14px 1px #7fffd4;
	-webkit-box-shadow: 5px 7px 14px 1px #7fffd4;
	box-shadow: 5px 7px 14px 1px #7fffd4;
	background-color:#008000;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #006400;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:16px;
	font-weight:bold;
	padding:2px 4px;
	text-decoration:none;
}
.btn3G:hover {
	background-color:#228b22;
	color:#ffffff;
	text-decoration:none;
}
.btn3G:active {
	position:relative;
	top:1px;
}
.btn4 {
  background: #9734d9;
  background-image: -webkit-linear-gradient(top, #9734d9, #502bb8);
  background-image: -moz-linear-gradient(top, #9734d9, #502bb8);
  background-image: -ms-linear-gradient(top, #9734d9, #502bb8);
  background-image: -o-linear-gradient(top, #9734d9, #502bb8);
  background-image: linear-gradient(to bottom, #9734d9, #502bb8);
  -webkit-border-radius: 7;
  -moz-border-radius: 7;
  border-radius: 7px;
  text-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 7px 3px 8px #cc9eeb;
  -moz-box-shadow: 7px 3px 8px #cc9eeb;
  box-shadow: 7px 3px 8px #cc9eeb;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 4px 8px 4px 8px;
  text-decoration: none;
}

.btn4:hover {
  background: #fc3cf6;
  background-image: -webkit-linear-gradient(top, #fc3cf6, #d93497);
  background-image: -moz-linear-gradient(top, #fc3cf6, #d93497);
  background-image: -ms-linear-gradient(top, #fc3cf6, #d93497);
  background-image: -o-linear-gradient(top, #fc3cf6, #d93497);
  background-image: linear-gradient(to bottom, #fc3cf6, #d93497);
  text-decoration: none;
}

ボタン風の囲み表示

Mobile .NET Android C# C# Mono Xamarin
CODE
HTML 

   <span class="g-kakomi"><a class="shiro" href="">Mobile</a></span>
   <span class="o-kakomi"><a class="shiro" href="">.NET</a></span>
   <span class="o-kakomi"><a class="shiro" href="">Android</a></span>
   <span class="b-kakomi"><a class="shiro" href="">C#</a></span>
   <span class="bg-kakomi"><a class="shiro" href="">C#</a></span>
   <span class="r-kakomi"><a class="shiro" href="">Mono</a></span>
   <span class="r-kakomi"><a class="shiro" href="">Xamarin</a></span>
CSS 

.o-kakomi{
	background:#ff8000;
	color:#fff;
	padding:2px 4px;
	font-size:90%
}
.g-kakomi{
	background:#008040;
	color:#fff;
	padding:2px 4px;
	font-size:90%
}
.b-kakomi{
	background:#0000ff;
	color:#fff;
	padding:2px 4px;
	font-size:90%
}
.r-kakomi{
	background:#d5006a;
	color:#fff;
	padding:2px 4px;
	font-size:90%
}
.bg-kakomi{
	background:#008099;
	color:#fff;
	padding:2px 4px;
	font-size:90%
}
a.shiro:hover,a.shiro:link,a.shiro:visited{
	color:#FFF;
	text-decoration:none;
}

リスト表示の時に便利(マル抜き文字)

1 2 3 4 14 145

CODE
HTML 

   <p>
    <span class="r123">1</span>
    <span class="b123">2</span>
    <span class="g123">3</span>
    <span class="o123">4</span>
    <span class="o123">14</span>
    <span class="o123">145</span>
   </p>
CSS 

.r123,.b123,.g123,.o123,.r-abc,.o-abc,.b-abc,.g-abc,p .o-abc,span.ent-123{
	display:inline-block;
	margin:0 5px;
	font-family:Tahoma;
	color:#fff;
	text-indent:0;
	text-align:center;
	font-weight:700
}

.r123,.b123,.g123,.o123,span.ent-123{
	background-color:#c00;
	border-radius:9px;
	height:18px;
	line-height:18px;
	width:18px;
	font-size:12px
}

.b123{
	background-color:#006FAB;
	border-radius:9px;
	height:18px;
	line-height:18px;
	width:18px;
	font-size:12px
}

.g123{
	background-color:#008000;
	border-radius:9px;
	height:18px;
	line-height:18px;
	width:18px;
	font-size:12px
}

.o123{
	background-color:#E8822A;
	border-radius:
	9px;height:18px;
	line-height:18px;
	width:18px;
	font-size:12px
}

リスト表示の時に便利(四角抜き文字)

a b c d de

CODE
HTML 

   <p>
    <span class="r-abc">a</span>
    <span class="b-abc">b</span>
    <span class="g-abc">c</span>
    <span class="o-abc">d</span>
    <span class="o-abc">de</span>
   </p>
CSS 

.r-abc,p .r-abc{
	background-color:#c00;
	vertical-align:middle;
	width:20px;
	height:20px;
	line-height:20px
}
.b-abc,p .b-abc{
	background-color:#006FAB;
	vertical-align:middle;
	width:20px;
	height:20px;
	line-height:20px
}
.g-abc,p .g-abc{
	background-color:#008000;
	vertical-align:middle;
	width:20px;
	height:20px;
	line-height:20px
}
.o-abc,p .o-abc{
	background-color:#E8822A;
	vertical-align:middle;
	width:20px;
	height:20px;
	line-height:20px
}

jQuery-uiによるボタン表示

widget(スクリプト)で加工して表示する場合

アンカー要素
CODE
HTML 

   <div class="widget1">
     <button>ボタン要素</button>
     <input type="submit" value="送信ボタン">
     <a href="#">アンカー要素</a>
   </div>
Javascript 

// 下記を読みこませておく！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  $( function() {
    $( ".widget1 input[type=submit], .widget1 a, .widget1 button" ).button();
    $( "button, input, a" ).click( function( event ) {
      event.preventDefault();
    } );
  } );
CSS 

// 下記を読みこませておく！
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

CSS で指定して表示する場合

アンカー要素
CODE
HTML 

   <button class="ui-button ui-widget ui-corner-all green" style="background-color:mistyrose">ボタン要素</button>
   <input class="ui-button ui-widget ui-corner-all blue" type="submit" value="フォームの送信">
   <a class="ui-button ui-widget ui-corner-all mediumvioletred" href="#">アンカー要素</a>
CSS 

// 下記を読みこませておく！
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

四角のボタン

B!

丸いボタン

長方形のボタン

Twitter似の色 ボタン Facebook Google+ Pocket B! Hatena RSS Pin it
CODE
HTML 


    <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i></a>    
    <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i></a>   
    <a href="#" class="btn btn-google"><i class="fa fa-google-plus"></i></a>
    <a href="#" class="btn btn-pocket"><i class="fa fa-get-pocket"></i></a>
    <a href="#" class="btn btn-hatena">B!</a>
    <a href="#" class="btn btn-rss"><i class="fa fa-rss"></i></a>
    <a href="#" class="btn btn-pin"><i class="fa fa-pinterest"></i></a>
    <hr>
    <a href="#" class="cbtn cbtn-tw"><i class="fa fa-twitter"></i></a>    
    <a href="#" class="cbtn cbtn-fb"><i class="fa fa-facebook"></i></a>   
    <a href="#" class="cbtn cbtn-google"><i class="fa fa-google-plus"></i></a>
    <a href="#" class="cbtn cbtn-pocket"><i class="fa fa-get-pocket"></i></a>
    <a href="#" class="cbtn cbtn-rss"><i class="fa fa-rss"></i></a>
    <a href="#" class="cbtn cbtn-pin"><i class="fa fa-pinterest"></i></a>
    <hr>
    <a href="#" class="sbtn sbtn-tw"><i class="fa fa-twitter"></i> <span>Twitter</span></a>
    <a href="#" class="sbtn BGteal"><span>ボタン</span></a>

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

// 下記を読みこませておく！
CSS 

a.btn-tw{  /* ツイッター */
  background: #55ACEE;
}
a.btn-fb{ /* フェイスブック */
  background: #3B5998;
}
a.btn-google{  /* グーグルプラス */
  background: #DD4B39;
}
a.btn-pocket{  /* pocket */
  background: #EE4257;
}
a.btn-hatena{  /* はてぶ */
  background: #3C7DD1;
  font-weight: bold;
}
a.btn-rss{  /* RSS */
  background: #FFB53C;
}
a.btn-pin{  /* pin it */
  background: #D4121C;
}

a.cbtn-tw{  /* ツイッター */
  background: #55ACEE;
}
a.cbtn-fb{ /* フェイスブック */
  background: #3B5998;
}
a.cbtn-google{  /* グーグルプラス */
  background: #DD4B39;
}
a.cbtn-pocket{  /* pocket */
  background: #EE4257;
}
a.cbtn-rss{  /* RSS */
  background: #FFB53C;
}
a.cbtn-pin{  /* pin it */
  background: #D4121C;
}


a.sbtn-tw{  /* ツイッター */
  width: 85px;
  background: #55ACEE;
}
a.sbtn-fb{ /* フェイスブック */
  width: 95px;
  background: #3B5998;
}
a.sbtn-google{  /* グーグルプラス */
  width: 95px;
  background: #DD4B39;
}
a.sbtn-pocket{  /* pocket */
  width: 75px;
  background: #EE4257;
}
a.sbtn-hatena{  /* はてぶ */
  width: 80px;
  background: #3C7DD1;
  font-weight: bold;
}
a.sbtn-hatena span{
  font-weight: normal;
}
a.sbtn-rss{  /* RSS */
  width: 60px;
  background: #FFB53C;
}
a.sbtn-pin{  /* pin it */
  width: 65px;
  background: #D4121C;
}