「ボタンタグに似せたアイコン」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

ボタンタグに似せたアイコン

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ボタンタグに似せたアイコン</title>
  7. <style type="text/css">
  8. .btnBase{
  9.   margin:0 2px 0 0;
  10.   padding:1px 4px;
  11.   white-space:nowrap;
  12.   text-decoration: none;
  13.   display: inline-block;
  14.   text-align: center;
  15.   font-family:"ＭＳ ゴシック", "Osaka";
  16.   font-size:12px;
  17.   color: #000;
  18.   border: 1px solid #707070;
  19.   -moz-border-radius: .3em;
  20.   border-radius: .3em;
  21. }
  23. /* ボタンの色 */
  24. .btnColr{
  25.   border: 1px solid #707070;
  26.   background: #EBEBEB;
  27.   background: -moz-linear-gradient(top, #F2F2F2, #EBEBEB 50%, #DBDBDB 50%, #CFCFCF);                                           /* Firefox       */
  28.   background: -o-linear-gradient(top, #F2F2F2, #EBEBEB 50%, #DBDBDB 50%, #CFCFCF);                                             /* Opera         */
  29.   background: -webkit-linear-gradient(linear, top, bottom, #F2F2F2, color-stop(0.5 #EBEBEB), color-stop(0.5 #DBDBDB), #CFCFCF); /* Chrome,Safari */
  30.   background: linear-gradient(linear, top, bottom, #F2F2F2, color-stop(0.5 #EBEBEB), color-stop(0.5 #DBDBDB), #CFCFCF);
  31.   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F2F2F2', endColorstr='#CFCFCF');            /* IE5.5、6      */
  33.   box-shadow: 0 0 2px 0 rgba(255,255,255,1) inset;
  34.   -moz-box-shadow: 0 0 2px 0 rgba(255,255,255,1) inset;
  35.   -webkit-box-shadow: 0 0 2px 0 rgba(255,255,255,1) inset;
  36. }
  38. .btnColr:hover{
  39.   border: 1px solid #3C7FB1;
  40.   background: #D9F0FC;
  41.   background: -moz-linear-gradient(top, #EAF6FD, #D9F0FC 50%, #BCE5FC 50%, #A7D9F5);                                           /* Firefox       */
  42.   background: -o-linear-gradient(top, #EAF6FD, #D9F0FC 50%, #BCE5FC 50%, #A7D9F5);                                             /* Opera         */
  43.   background: -webkit-linear-gradient(linear, top, bottom, #EAF6FD, color-stop(0.5 #D9F0FC), color-stop(0.5 #BCE5FC), #A7D9F5); /* Chrome,Safari */
  44.   background: linear-gradient(linear, top, bottom, #EAF6FD, color-stop(0.5 #D9F0FC), color-stop(0.5 #BCE5FC), #A7D9F5);
  45.   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EAF6FD', endColorstr='#A7D9F5');            /* IE5.5、6      */
  46. }
  48. a.btnColr:active{
  49.   box-shadow: 0 0 2px 0 rgba(128,128,128,1) inset;
  50.   -moz-box-shadow: 0 0 2px 0 rgba(128,128,128,1) inset;
  51.   -webkit-box-shadow: 0 0 2px 0 rgba(128,128,128,1) inset;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <h1>ボタンタグに似せたアイコン</h1>
  58. <a class="btnBase btnColr" href="#">ボタン</a>←CSSでaタグをボタンっぽくしたヤツ<br />
  59. <button>ボタン</button>←buttonタグ<br />
  61. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  62. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  63. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  64. </div>
  66. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  67. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  68. </div>
  70. </body>
  71. </html>