◆当ページにはプロモーションが含まれています

HTML

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

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

先日、「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-decorationcolor を指定することで、aタグっぽさをなくします。

その3 文字の大きさ変更や角丸、変化を追加する

その上で装飾を施していくという流れです。コードはサンプルコードと一緒ですね。


みなさんも試してみてください!

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です