HTML

【サンプル付き】aタグをCSSを使ってボタンっぽく表示してみよう！

proglearn 2020年11月17日

みなさん、こんにちは。どんぶラッコです。

先日、「aタグをボタンっぽく見せるにはどうしたらいいの？」という質問を受けました。

簡単なサンプルを作成したので、せっかくなのでこちらでも公開しておこうと思います！

どんぶラッコ

aタグに限らず divタグとかでも使えるよ！

コードサンプル
サンプルコード

コードサンプル

See the Pen aタグをボタンっぽくするサンプル by cha1ra (@cha1ra) on CodePen.

こんなものが表示されていればOKです

ボタンっぽいですよね！

サンプルコード

まずはHTML。

  <a href="" class="button">
    ボタンっぽいaタグ
  </a>

aタグを作成し、それに対して .button クラスを指定しています。

続いてCSS。

.button {
  transition: .3s; /* 変化時間 0.3秒 */
  padding: 24px 48px; /* 内側の余白設定 */
  border-radius: 12px; /* 要素の角を丸くする */
  background-color: #2ecadf; /* 背景色指定 */
  text-decoration: none; /* aタグの下線を非表示に */
  color: #fff; /* 文字色 */
  font-size: 1.5rem; /* フォントサイズ */
}

.button:hover { 
  transition: .3s; /* 変化時間 0.3秒 */
  background-color: #00a9de; /* 背景色 */
}

各パラメータの説明はコメントに書いてある通りです！

なので、上から順番に写経していけば完成するのですが、ここでは初めて作る方のために考え方のポイントをお伝えしておこうと思います。

その1 要素を広げて色をつける

.button {
  padding: 24px 48px; /* 内側の余白設定 */
  background-color: #2ecadf; /* 背景色指定 */
}

まずするべきはpaddingを使って要素を広げ、背景色を設定することです。

その2 aタグらしさを除去する

.button {
  padding: 24px 48px; /* 内側の余白設定 */
  background-color: #2ecadf; /* 背景色指定 */
  text-decoration: none; /* aタグの下線を非表示に */
  color: #fff; /* 文字色 */
}

続いて text-decoration と color を指定することで、aタグっぽさをなくします。