CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで境界線付きのリンクボタンを作成する方法

CSSを使えば、<a>タグにスタイルを適用するだけで、簡単に境界線（ボーダー）付きのリンクボタンを作成できます。通常のテキストリンクをボタンのような見た目に変えるには、border、padding、background-colorなどのプロパティを組み合わせるのがポイントです。

使用している主なCSSプロパティ

  • border：リンクの周囲に境界線を引きます。サンプルでは「1px solid blue」として青色の実線を指定しています。
  • padding：文字の周囲に余白を設け、押しやすいボタンらしいサイズ感を作ります。
  • display: inline-block：インライン要素であるリンクに対して、パディングやボーダーの指定を正しく反映させます。
  • text-decoration: none：リンクにデフォルトで付く下線を消して、ボタンらしく見せます。
  • a:hover / a:active：マウスオーバー時やクリック中のデザインを切り替え、視覚的なフィードバックを与えます。

サンプルコード

以下のコードを実行すると、境界線付きのリンクボタンが表示されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         a:link, a:visited {
            background-color: white;
            color: black;
            border: 1px solid blue;
            padding: 30px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
         }
         a:hover, a:active {
            background-color: red;
            color: white;
         }
      </style>
   </head>
   <body>
      <a href = "demo.html" target = "_blank">Demo Link</a>
   </body>
</html>

コードの解説

この例では、a:linkとa:visited（未訪問・訪問済みリンク）に対して、白背景・黒文字・青い境界線のスタイルを適用しています。一方、a:hoverとa:activeでは背景が赤、文字色が白に変わるよう設定されているため、ユーザーがマウスを重ねたりクリックしたりした瞬間に、ボタンが反応していることがひと目でわかります。

paddingの値を調整すればボタンの大きさを自由に変更でき、borderの色や太さを変えればサイトのデザインに合わせたカスタマイズも簡単に行えます。

  1. CSSで検索ボタンを作成する方法｜サンプルコード付きで解説

    CSSを使えば、テキスト入力欄と検索アイコンボタンを組み合わせた、おしゃれで使いやすい検索フォームを簡単に作成できます。ここでは、Font Awesomeのアイコンを活用した検索ボタンの実装例を、実際のコードとともに紹介します。実装例（サンプルコード）以下は、CSSを使用して検索ボタンを作成するためのコード例です。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1">

  2. HTMLでダウンロードリンクを作成する方法をわかりやすく解説

    HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800