【簡単コード】ボタンホバー時にボタンの枠線をアニメーションで囲むオシャレなCSSの書き方

現在 codestep に全力投球中のトム＠プログラマー見習いです。

Codestep | 作って学ぶコーディング学習サイト（HTML、CSS、JavaScript、WordPress）

Codestep（コードステップ）は、HTML、CSS、JavaScriptの基礎学習を終えた方が、模写コーディングやデザインカンプからのコーディング練習を通して、より実践的なWebサイト制作のスキルを身につけるためのコーディング学習サイトです。

その中に、「ボタンホバー時にボタンを枠線で囲む」という課題があり、大苦戦の末完成しました！！せっかくなので備忘録もかねてコードを掲載します。

今回のポイント・・・ボタンのbefore と afterを定義しそれぞれボタンの左上、右下の位置にセット。ホバー(hover)時にbeforeとafterの枠線のwidthとheightを変更し、枠線が伸びるようにする

【早い者勝ち！】.com／.net／.jp　ドメイン取るならお名前.com

コード
1. HTML
2. CSS
実行結果

コード

HTML

「Read More」という文字を<a>タグで囲んでます。<a>タグにはbuttonクラスを定義しています。<a>タグの親要素として<div>タグでreadmoreクラスを定義しています。

<div class="readmore">
　<a class="button" href="#">Read More</a>
</div>

CSS

前提として、最初からボタンの左上と右下に枠線の一部が鍵括弧のように描画されています（コードの”button::before”と”button::after”に”width: 20px height: 20px”と指定してる部分が該当)。ボタンにホバーしたときにwidthとheightを99%,95%への変更を指定することで、枠線がボタン全体を囲むようになります。

※widthとheightが100%でないのは枠線の太さを2pxに指定しているためか100%だとわずかに線が伸びすぎてしまうためです。ただ環境によって動きは異なる可能性がありますのでご注意を。

.readmore {
  width: 100%;
  text-align: center;
}

.button {
  color: #000;
  font-size: 14px;
  position: relative;
  display: inline-block;
  padding: 15px 60px;
  border: 2px solid #fff;
  text-decoration: none;
  outline: none;
  transition: all .3s;
}

.button::before {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  content: '';
  transition: all .3s;
}

.button::after {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 2;
  content: '';
  transition: all .3s;
}

.button::before {
  border-top: 2px solid red;
  border-left: 2px solid red;
  width: 20px;
  height: 20px;
}

.button::after {
  border-right: 2px solid red;
  border-bottom: 2px solid red;
  width: 20px;
  height: 20px;
}

.button:hover::after, .button:hover::before {
  width: 99%;
  height: 95%;
}