3月に入って4日目。

まだまだ、寒さが続いてますが…

体調には気を付けてください！

さてと、話題を取り戻して…

リンクボタンにアニメーションをつける

リンクボタンにアニメーションをつける時代は衰退してきてるかもしれませんが…

大手企業のサイトを見ると、リンクボタンにクリックすると、色の濃さが変わってきてますね。

マウスを乗せると、ふわっと色が変わるサイトもたまに見かけます。

リンクボタンにアニメーションを付け方を説明しますね。

HTMLは省略させていただきます。

今回は、CSSだけ解説しておきますね。

a {
	/* 好みに合わせてデザインしてください。 */
}

/* アニメショーンの付け方 */
a:hover {
	opacity: 0.7; /* 透過したいとき */
	transition: 0.5; /* マウスを乗せた時の時間 */
}

これで、アニメーションが動きます。

アニメーションのバリエーションについてはまた、ほかのサイトをいくつかピックアップしてご紹介したいと思います。

ではまた！