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

その中に、「ボタンホバー時にボタンを枠線で囲む」という課題があり、大苦戦の末完成しました!!せっかくなので備忘録もかねてコードを掲載します。
今回のポイント・・・ボタンの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にすれば枠線が無い状態からボタンの枠線を囲むなど、色々な形に応用できます^^
【早い者勝ち!】.com/.net/.jp ドメイン取るならお名前.com
ということで、ボタンホバー時にボタンの枠線を伸ばして囲むCSSの書き方を解説しました。
東証スタンダード上場企業の就職後支払いが可能な開発エンジニアスクール【IT道場】
