アイコンとテキストが上下に並ぶボタンを作りたい

アイコンの下にテキストがついているボタンで、ボタン全体をクリックできるようにしたい場合のテクニックです。ボタンになるHTMLを<a>～</a>で囲んでいます。HTML構造が比較的シンプルで、使うタグの数も最小限に抑えられています。そのため、ナビゲーションにボタンを横に並べるときなど、より複雑なレイアウトを作る場合でもHTMLが読みやすさを維持できます。

サンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8"><!-文字コードを指定->
    <style>
      
      .tool_btn{
        text-decoration:none;
      }
      .tool_btn div{
        margin-bottom: 10px;
        padding: 20px 0;
        width: 150px;
        background: #267f85;
        border-radius: 10px;
        font-size:12px;
        text-align: center;
        color:#fff;
      }
      .tool_btn div:hover{
        background:#329b99;
      }
     
    </style>
  </head> 
  <body>
    <a href="#" class="tool_btn">
      <div>
        <img src="./images/icon1.png" alt=""><br>
        論文検索
      </div>
    </a>
    <a href="#" class="tool_btn">
      <div>
        <img src="./images/icon2.png" alt=""><br>
        データ検索
      </div>
    </a>
   </body>
</html>

実行結果

カテゴリー:WEB