オシャレなボタン枠アニメーション

ボタンのアニメーションについてご紹介。
ボタンアニメーションはたくさんありますが、おしゃれで実用性がありそうだなと思ったので紹介しますね。

今回紹介するのはこんなボタンアニメーション。
細いラインがオシャレを演出してくれます。
ホテルのホームページとか、ラグジュアリーなサイトでも使われています。
アニメーションすると、ボタンということがとても分かりやすいですね。

See the Pen
border animation by Yoshimune (@hachidaime)
on CodePen.

使いたい場合は、そのままコピペして使ってもらえれば大丈夫です。
HTMLはできるだけシンプルにしました。
CSSはちょっと長いですが、そのまま使ってください。

ソースコードの説明

使うときはコピペでいいですが、ちょっとだけ解説。
このコードをカスタマイズして、自分なりの動きに変更したい人は以下の解説を読んでいてもらうといいと思います。

今回のアニメーションは、ボタンの要素に対して上下左右の4つのラインをアニメーションさせていきます。
4つのラインのために、本来4つの要素が必要になるのでHTMLが複雑になりがちですが、
そこはCSSの疑似要素を使って対応しています。
疑似要素は:before, :afterの2つがありますね。
4つ必要なのに2つでは足りないので、HTMLでは内部にspanタグを入れて元の要素をaとspanの2つにしています。

<a href="#" class="button-border">
  <span>マウスをのせてください</span>
</a>

使用できるのは、

元要素２つ×:before, :after = 4要素

となりますね。

それぞれの要素サイズをはじめは0にして起点に配置、マウスオーバーでそのサイズを変えている感じです。

/* 擬似要素の共通スタイル */
.button-border::after,
.button-border::before,
.button-border span::after,
.button-border span::before {
  background-color: #3498db;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
/* 左上へ配置 */
.button-border::after {
    width: 0px;
    height: 2px;
    top: -1px;
    left: -1px;
}
/* 右下へ配置 */
.button-border::before {
    width: 0px;
    height: 2px;
    right: -1px;
    bottom: -1px;
}
/* 左下へ配置 */
.button-border span::after {
    width: 2px;
    height: 0px;
    left: -1px;
    bottom: -1px;
}
/* 右上へ配置 */
.button-border span::before {
    width: 2px;
    height: 0px;
    top: -1px;
    right: -1px;
}

/* hover */
.button-border:hover::after,
.button-border:hover::before {
  width: 100%;
  width: calc(100% + 1px);
}

.button-border:hover span::after,
.button-border:hover span::before {
  height: 100%;
  height: calc(100% + 1px);
}

少し長くて複雑そうなコードに見えたと思いますが、
解説を理解すればやっていることはシンプル。

動作の起点を変更すれば、また別の動きをするような形も作れますね。

See the Pen
border animation2 by Yoshimune (@hachidaime)
on CodePen.