Aタグを画像不使用のCSSだけでボタン

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Aタグを画像不使用のCSSだけでボタン</title>
  6. </head>
  7. <body>
  8. <h1>Aタグを画像不使用のCSSだけでボタン</h1>
  9. <style type="text/css">
  10. a.btnLnk{
  11.   margin:0 2px 0 0;
  12.   padding:2px 4px;
  13.   text-decoration: none;
  14.   display: inline-block;
  15.   text-align: center;
  16.   font-family:"MS ゴシック", "Osaka";
  17.   font-size:10px;
  18.   border: 1px solid #9c9c9c; /* Fallback style */
  19.   box-shadow: 0 0 .05em rgba(0,0,0,0.2);
  20.   -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.2);
  21.   -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.2);
  22. }
  23. a.btnLnk{
  24.   -moz-border-radius: .3em;
  25.   border-radius: .3em;
  26. }
  27. a.btnLnk:hover{
  28.   box-shadow: 0 0 .1em rgba(0,0,0,0.2);
  29.   -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.2);
  30.   -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.2);
  31. }
  32. a.btnLnk:active{
  33.   /* When pressed, move it down 1px */
  34.   position: relative;
  35.   top: 1px;
  36. }
  37. /* ボタンの色 */
  38. a.btnLnk{
  39.   color: #333;
  40.   background: #f0f0f0;
  41.   background: -moz-linear-gradient(#e2e2e2, #f0f0f0); /* Firefox */
  42.   background: -o-linear-gradient(#e2e2e2, #f0f0f0); /* Opera */
  43.   background: -webkit-linear-gradient(#e2e2e2, #f0f0f0); /* Chrome,Safari */
  44.   background: linear-gradient(#e2e2e2, #f0f0f0);
  45.   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e2e2e2', endColorstr='#f0f0f0');
  46. }
  47. a.btnLnk:hover{
  48.   background: #e2e2e2;
  49.   background: -moz-linear-gradient(#f0f0f0, #e2e2e2); /* Firefox */
  50.   background: -o-linear-gradient(#f0f0f0, #e2e2e2); /* Opera */
  51.   background: -webkit-linear-gradient(#f0f0f0, #e2e2e2); /* Chrome,Safari */
  52.   background: linear-gradient(#f0f0f0, #e2e2e2);
  53.   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#e2e2e2');
  54. }
  55. a.btnLnk:active{
  56.   background: #f0f0f0;
  57. }
  58. </style>
  59. <div style="border:1px solid #ccc; background:#ffeeff;padding:5px;width:200px;">
  60. <a class="btnLnk" href="#">てすと1</a>
  61. <a class="btnLnk" href="#">てすとてすと2</a>
  62. <a class="btnLnk" href="#">てすとてすとてすと3</a>
  63. <a class="btnLnk" href="#">てすとてすとてすとてすと4</a>
  64. <a class="btnLnk" href="#">てすと5</a>
  65. <a class="btnLnk" href="#">てすとてすとてすと6</a>
  66. <a class="btnLnk" href="#">てすと7</a>
  67. <a class="btnLnk" href="#">てすとてすと8</a>
  68. </div>
  69. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  70. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  71. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  72. </div>
  73. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  74. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  75. </div>
  76. </body>
  77. </html>