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

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

1 作りたいボタンのイメージ動画
2 コードの紹介
3 CSSの解説
4 まとめ
5 CSSコーディングのオススメ本

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

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

コードの紹介

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

HTML

<div class="container">
　<a href="#"><span>Button</span></a>
</div>

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

CSS

.container00 a
{
 text-decoration: none;
 font-weight: bold;
 color: #919191;
 width: 200px;
 height: 70px;
 position: relative;
 display: inline-block;
}

.container00 a span
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 2.4em;
 letter-spacing: 2px;
}

.container00 a:hover
{
 color: #0d0015;
}

.container00 a:after
{
 position: absolute;
 bottom: 0;
 left: 0;
 content: '';
 width: 100%;
 height: 2px;
 background: #333;
 transform: scale(0, 1);
 transform-origin: left top;
 transition: transform .3s;
}

.container00 a:hover::after
{
 transform: scale(1, 1);
}

CSSの解説

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

.container00 a:after
{
 ・・・省略
 transform: scale(0, 1);
 transform-origin: left top;
 transition: transform .3s;
}

.container00 a:hover::after
{
 transform: scale(1, 1);
}

transform: scale

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

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

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

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モジュール)まで掲載しています。