[PR]
HOME>ゴーストボタン１>ゴーストボタン２>ゴーストボタン３
ＣＳＳを使って作成するゴーストボタンを紹介しています。メニューやバナーなどに使えたら嬉しいです。 コピペするだけですので、そんなに難しくないと思います。
ＨＴＭＬ
<a href="#" class="btn sample1">sample 1</a>
ＣＳＳ(背景無し)
a.btn{ display: inline-block; width: 120px; margin: 45px 40px 40px; padding: 15px 10px; border: 1px solid #fff; background: transparent; color: #fff; text-align: center; text-decoration: none; line-height: 1; transition: .3s; } a.sample1:hover { border: 1px solid rgba(0,0,0,.5); color: rgba(0,0,0,.5); }
<a href="#" class="btn sample2">sample 2</a>
ＣＳＳ
a.btn{ display: inline-block; width: 120px; margin: 45px 40px 40px; padding: 15px 10px; border: 1px solid #fff; background: transparent; color: #fff; text-align: center; text-decoration: none; line-height: 1; transition: .3s; } a.sample2:hover { border: 1px solid rgba(0,0,0,.1); background: rgba(0,0,0,.5); }
<a href="#" class="btn sample3">sample 3</a>
a.btn{ display: inline-block; width: 120px; margin: 45px 40px 40px; padding: 15px 10px; border: 1px solid #fff; background: transparent; color: #fff; text-align: center; text-decoration: none; line-height: 1; transition: .3s; } .sample3:hover { box-shadow: 0 0 20px 5px rgba(255,255,255,.3) inset; }
<a href="#" class="btn sample4">sample 4</a>
a.btn{ display: inline-block; width: 120px; margin: 45px 40px 40px; padding: 15px 10px; border: 1px solid #fff; background: transparent; color: #fff; text-align: center; text-decoration: none; line-height: 1; transition: .3s; } a.sample4:hover { background: #fff; color: #555; }
<a href="#" class="btn sample5">sample 5</a>
a.btn{ display: inline-block; width: 120px; margin: 45px 40px 40px; padding: 15px 10px; border: 1px solid #fff; background: transparent; color: #fff; text-align: center; text-decoration: none; line-height: 1; transition: .3s; } a.sample5:hover { border-radius: 8px; }