hoverで内側の線が広がる繊細なボタン
サンプルは細い線と淡い色使いで、非常に繊細なイメージを持たせています。
はっきりした色使いも合うデザインです。
内から外
外から内
内から外
ボタンリンク
HTML
<a href="" class="btn">ボタンリンク</a>
CSS
.btn { display: inline-block; padding: 1.25em 3em; color: #333; text-decoration: none; background: #f3ede6; transition: all ease .3s; position: relative;} .btn::before { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 1em); height: calc(100% - 1em); border: 1px solid #797471; content: ""; transition: all ease .3s;} .btn:hover::before { width: 100%; height: 100%;}
外から内
ボタンリンク
HTML
<a href="" class="btn2">ボタンリンク</a>
CSS
.btn2 { display: inline-block; padding: .75em 2em; color: #333; text-decoration: none; background: #f3ede6; transition: all ease .3s; position: relative;} .btn2::before { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 1em); height: calc(100% + 1em); border: 1px solid #797471; content: ""; transition: all ease .3s;} .btn2:hover::before { width: 100%; height: 100%;}
一覧に戻る
