【CSS】マウスオーバーするとボーダーが伸びてくるボタンをCSSだけで作ってみる

今はCSSでアニメーションを付ける事が出来る様になりました。
今回は、マウスを乗せると下のボーダーがラインの様にニューっと伸びてくるアニメーションをCSSだけで付けてみましょう。

作りたいボタンのイメージ動画

作りたいボタンのイメージ動画です。
マウスに載せた時のイメージはこんな感じのボタンを作ってみます。

コードの紹介

以下のHTMLとCSSコードを作成します。

HTML

HTMLは特別変わった所はありませんが、タグの中のテキストはspanで囲ってください。

CSS

CSSの解説

マウスを乗せた時に動くボーダーに重要なのは以下のCSSです。

transform: scale

「transform: scale」は要素を拡大したり、縮小したりするプロパティ。
今回使用したのは「transform: scale(0, 1);」です。

これは、
transform: scale(X軸の数値, Y軸の数値)が入ります。
X軸は横、Y軸は縦となります。

hover::afterの方に「transform: scale(1, 1);」を入れているのは、X軸が0から1になる様にしています。Y軸(縦)は動かないので1から1にしています。

transform-origin

「transform-origin」は要素の形を変える、アニメーションをする際の「原点」の位置を設定するプロパティです。
「transform-origin: left top;」と設定しているのは、左から右に動く為、原点をleft(左)にしています。

transition: transform

「transition」はcssを変化させる際の「速度」を調整するプロパティです。
この数値を変更する事で、表示のスピードが変わります。

まとめ

シンプルなだけに使いやすいアニメーションです。
逆に最初は付いているボーダーをアニメーションで消す事もできるので、色々変更してみてください。

CSSコーディングのオススメ本

CSS辞典 第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!