CSS

【サンプル付き】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 文字の大きさ変更や角丸、変化を追加する

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


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

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

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

@proglearn
RELATED POST

COMMENT

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