HTML & CSS

最終更新日:
公開日:

レシピ

CSSレシピ

テキストリンクのCSSレシピ

CSSを使ってテキストリンクの色やボーダー、背景色に動きをつけるアニメーションのレシピを紹介します。

この記事のポイント

  • CSSのアニメーションでテキストリンクに動きをつける

目次

テキストリンクのCSSレシピ

CSSを使ったテキストリンクの色やボーダー、背景色、アイコン画像にアニメーションで動きを付けるレシピ集です。

以下のコード例ではindex.htmlstyle.cssを読み込むことを想定します。
また、全てのテキストリンクはclass属性textlinkを設定し、以下のCSSを共通で適用します。

style.css

// テキストリンクの共通スタイル
.textlink {
	display: inline-block;
	color: #222;
	text-decoration: none;

	&:hover {
		text-decoration: none;
	}
}

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。