【ブログCSS】ボタンとリンクをおしゃれに装飾！ホバー時の動きを作る方法

第2回では、文字サイズと余白を調整して「読みやすさ」の土台を作りました。今回はそこから一歩進んで、読者が思わずクリックしたくなるような「ボタンとリンク」の装飾に挑戦しましょう！

思わずクリックしたくなる！「ボタンとリンク」の装飾術

ただの青い下線テキストを、ゲームのメニュー画面のような洗練されたボタンに変えてみませんか？

第8章：リンクの下線を消してスッキリ見せる
第9章：マウスを乗せた時に「反応」させる（hover）
第10章：【実践】おしゃれな「ポチれる」ボタンを作る
まとめ：アクションを促すデザインを！

第8章：リンクの下線を消してスッキリ見せる

標準のリンクは青文字に下線がついていますが、デザインによってはこれを消した方がスマートに見える場合があります。まずは下線をコントロールする方法を覚えましょう。

/* 記事内のリンクの下線を消す */
.entry-content a {
    text-decoration: none; /* 下線を消す */
    color: #0000ff;        /* リンクの色を指定 */
    font-weight: bold;     /* 太字にして目立たせる */
}

第9章：マウスを乗せた時に「反応」させる（hover）

ボタンやリンクは、マウスを乗せた時（ホバー時）に色が変わったり動いたりすると、読者に「ここはクリックできるんだ」と直感的に伝えることができます。

これには「:hover（擬似クラス）」を使います。エンジニアがUI設計で最もこだわるポイントの一つです。

/* マウスを乗せた時の動き */
.entry-content a:hover {
    color: #ff6600;           /* 色をオレンジに変える */
    text-decoration: underline; /* ホバー時だけ下線を出す */
    opacity: 0.8;             /* 少し透明にする */
}

第10章：【実践】おしゃれな「ポチれる」ボタンを作る

アフィリエイトリンクや公式サイトへの誘導など、ここぞという場所で使えるボタンを作ってみましょう。HTMLのaタグに「btn」というクラス名を付ける想定のコードです。

/* シンプルなボタンデザイン */
.btn {
    display: inline-block;
    padding: 10px 30px;
    background-color: #0000ff; /* 背景色（青） */
    color: #ffffff !important; /* 文字色（白） */
    border-radius: 25px;       /* 角を丸くする */
    text-decoration: none;
    transition: 0.3s;          /* 変化を滑らかにする */
}

/* ボタンのホバー時 */
.btn:hover {
    background-color: #3333ff; /* 少し明るい青に */
    transform: translateY(-2px); /* 少し上に浮かせる */
    box-shadow: 0 5px 10px rgba(0,0,0,0.2); /* 影をつける */
}

※HTML側では <a href="..." class="btn">ボタンの文字</a> と記述することで適用されます。