CODE html/css

【CSS】擬似要素を使って、ボタンに二重枠線を引く

更新日:

CSSの疑似要素を使って、ボタンに二重枠線を引きました。

See the Pen ボタンの二重枠 by yoshiya.kiryu (@yoshiyakiryu) on CodePen.

.btnは普通のボタン。

.btn::afterで外に二重枠線を引く。
position: absolute;を使って、ボタンの外側(-3px)の場所に線を引く(border: solid 2px #e22255;)

↑完成。

最後に「border: double 10px #e22255;」のようにdoubleを使えば簡単にできそうですが、外枠だけ色を変えるなど柔軟な対応が出来なさそうです。

※↑の上部の黒い線はCSSと関係ないです。(^^;;

-CODE, html/css
-, , ,

Copyright© kerublog , 2021 All Rights Reserved Powered by STINGER.