技術ネタを書けるような人間になりたいという心情を詠んだ句

aタグとbuttonの見た目を揃える

html css

Railsでlink_toとかbutton_toとかf.submitを使っていて、<a>と<button>が違う見た目になったことに憤慨したのでやってみた。bootstrapとかに頼ってると、こーいうとこが弱くなりますよね。

方針としては、全ての装飾を一旦消してaもbuttonも丸裸にしてから、好きなcssを当てるっていう感じ。

要らない行とかある気がするけどビギナーなのでそこはご愛嬌。
chromeとfirefoxで動作確認してあります。

<!doctype html>
<html>
  <head>
    <!-- normalize.cssマジ神 -->
    <link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.0/normalize.css">
    <style>
      a, button {
        font-family: monospace;  // この辺は統一できればなんでもOK
        font-size: 12pt;
        color: black;

        text-shadow: none;
        text-decoration: none;
        -webkit-text-decoration: none;

        display: inline-block;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: none;
        border: none;
        outline: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
      }

      button::-moz-focus-inner {  // ハマりポイント
        padding: 0;
        border: none;
      }

      a:active {
        color: black;
      }

      .my-button {  // ここからはご自由にどうぞ
        background-color: #80d080;
        padding: 8px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        box-shadow: 4px 4px rgba(0, 0, 0, .5);
      }
      .my-button:active {
        background-color: #60c060;
      }
    </style>
  </head>
  <body>
    <a href="#" class="my-button">Anchor</a>
    <button class="my-button">Button</button>
  </body>
</html>