Aタグを画像不使用のCSSだけでボタン
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>Aタグを画像不使用のCSSだけでボタン</title>
- </head>
- <body>
- <h1>Aタグを画像不使用のCSSだけでボタン</h1>
- <style type="text/css">
- a.btnLnk{
- margin:0 2px 0 0;
- padding:2px 4px;
- text-decoration: none;
- display: inline-block;
- text-align: center;
- font-family:"MS ゴシック", "Osaka";
- font-size:10px;
- border: 1px solid #9c9c9c; /* Fallback style */
- box-shadow: 0 0 .05em rgba(0,0,0,0.2);
- -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.2);
- -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.2);
- }
- a.btnLnk{
- -moz-border-radius: .3em;
- border-radius: .3em;
- }
- a.btnLnk:hover{
- box-shadow: 0 0 .1em rgba(0,0,0,0.2);
- -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.2);
- -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.2);
- }
- a.btnLnk:active{
- /* When pressed, move it down 1px */
- position: relative;
- top: 1px;
- }
- /* ボタンの色 */
- a.btnLnk{
- color: #333;
- background: #f0f0f0;
- background: -moz-linear-gradient(#e2e2e2, #f0f0f0); /* Firefox */
- background: -o-linear-gradient(#e2e2e2, #f0f0f0); /* Opera */
- background: -webkit-linear-gradient(#e2e2e2, #f0f0f0); /* Chrome,Safari */
- background: linear-gradient(#e2e2e2, #f0f0f0);
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e2e2e2', endColorstr='#f0f0f0');
- }
- a.btnLnk:hover{
- background: #e2e2e2;
- background: -moz-linear-gradient(#f0f0f0, #e2e2e2); /* Firefox */
- background: -o-linear-gradient(#f0f0f0, #e2e2e2); /* Opera */
- background: -webkit-linear-gradient(#f0f0f0, #e2e2e2); /* Chrome,Safari */
- background: linear-gradient(#f0f0f0, #e2e2e2);
- filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#e2e2e2');
- }
- a.btnLnk:active{
- background: #f0f0f0;
- }
- </style>
- <div style="border:1px solid #ccc; background:#ffeeff;padding:5px;width:200px;">
- <a class="btnLnk" href="#">てすと1</a>
- <a class="btnLnk" href="#">てすとてすと2</a>
- <a class="btnLnk" href="#">てすとてすとてすと3</a>
- <a class="btnLnk" href="#">てすとてすとてすとてすと4</a>
- <a class="btnLnk" href="#">てすと5</a>
- <a class="btnLnk" href="#">てすとてすとてすと6</a>
- <a class="btnLnk" href="#">てすと7</a>
- <a class="btnLnk" href="#">てすとてすと8</a>
- </div>
- <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
- <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
- <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
- </div>
- <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
- Copyright © 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
- </div>
- </body>
- </html>