[PR]
HOME>ゴーストボタン１>ゴーストボタン２>ゴーストボタン３
ＣＳＳを使って作成するゴーストボタンを紹介しています。メニューやバナーなどに使えたら嬉しいです。 コピペするだけですので、そんなに難しくないと思います。
ＨＴＭＬ
<a href="#" class="btn sample11">sample 11</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.sample11 { position:relative; z-index:2; overflow:hidden; } a.sample11::after { display:block; content:""; position:absolute; z-index:-1; top:50%; left:50%; width:0; height:0; margin:0; border-radius:50%; background:#fff; transition:.3s; } a.sample11:hover { color:#555; } a.sample11:hover::after { width:130px; height:130px; margin:-65px 0 0 -65px; }
<a href="#" class="btn sample12">sample 12</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.sample12 { position:relative; z-index:2; overflow:hidden; transition-delay:0; } a.sample12::after { display:block; content:""; position:absolute; z-index:-1; top:0; left:-100%; width:100%; height:100%; margin:0; background:#fff; transition:.3s; transition-delay:.4s; } a.sample12:hover { color:#555; transition-delay:.4s; } a.sample12:hover::after { left:0; transition-delay:0; }
<a href="#" class="btn sample13">sample 13</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.sample13 { position:relative; z-index:2; overflow:hidden; } a.sample13::after { display:block; content:""; position:absolute; z-index:-1; top:50%; left:50%; width:130px; height:130px; margin:-65px 0 0 -65px; border:65px solid rgba(255,255,255,0); border-radius:50%; transition:.5s; } a.sample13:hover::after { border-width:0; border-color:rgba(255,255,255,1); }
<a href="#" class="btn sample14">sample 14</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.sample14 { position:relative; z-index:2; overflow:hidden; } a.sample14::after { display:block; content:""; position:absolute; z-index:-1; top:50%; left:50%; width:130px; height:130px; margin:-65px 0 0 -65px; border:65px dotted rgba(255,255,255,0); border-radius:50%; transition:.5s; } a.sample14:hover::after { border-width:0; border-color: rgba(255,255,255,1); }
<a href="#" class="btn sample15">sample 15</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.sample15 { position:relative; z-index:2; overflow:hidden; } a.sample15::after { display:block; content:""; position:absolute; z-index:-1; top:50%; left:50%; width:130px; height:130px; margin:-65px 0 0 -65px; border:65px double rgba(255,255,255,0); border-radius:50%; transition:.5s; } a.sample15:hover { color:#555; } a.sample15:hover::after { border-width:0; border-color:rgba(255,255,255,1); background:#fff; }