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

スポンサーリンク

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

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

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

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

スポンサーリンク

コード

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%;
}
スポンサーリンク

実行結果

上記コードの実行結果は以下の通りです。

See the Pen by トム@株&不動産投資・Webプログラマー (@roby_tom) on CodePen.

ちなみにcodestepに記載のソースコード例はもう少しややこしい(てか私にはあまり理解できず・・)です。よりシンプルなコードでやりたいことを実現できました。

また先ほどのコードを元に、例えばwidthとheightのデフォルト値を0pxにすれば枠線が無い状態からボタンの枠線を囲むなど、色々な形に応用できます^^

ということで、ボタンホバー時にボタンの枠線を伸ばして囲むCSSの書き方を解説しました。

タイトルとURLをコピーしました