[PR]
HOME>ゴーストボタン１>ゴーストボタン２>ゴーストボタン３
ＣＳＳを使って作成するゴーストボタンを紹介しています。メニューやバナーなどに使えたら嬉しいです。 コピペするだけですので、そんなに難しくないと思います。
ＨＴＭＬ
<a href="#" class="btn sample6">sample 6</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.sample6 { position: relative; z-index: 2; } a.sample6::after { display: block; content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; border: 0 solid #fff; transition: .3s; } a.sample6:hover::after { border-width: 3px; }
<a href="#" class="btn sample7">sample 7</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.sample7 { position: relative; z-index: 2; overflow: hidden; } a.sample7::after { display: block; content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 0; height: 0; margin: 0; border-radius: 50%; background: rgba(0,0,0,.2); transition: .3s; } a.sample7:hover::after { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
<a href="#" class="btn sample8">sample 8</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.sample8 { position: relative; z-index: 2; } a.sample8::after { display: block; content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; width: 0; height: 0; margin: auto; background: rgba(0,0,0,.2); transition: .3s; } a.sample8:hover::after { width: 100%; height: 100%; }
<a href="#" class="btn sample9">sample 9</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.sample9 { position: relative; z-index: 2; } a.sample9::after { display: block; content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 0; height: 100%; margin: 0; background: rgba(0,0,0,.2); transition: .3s; } a.sample9:hover::after { width: 100%; }
<a href="#" class="btn sample10">sample 10</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.sample10 { position:relative; z-index:2; perspective:400px; transition-delay:0; transition-delay:0; } a.sample10::after { display:block; content:""; position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; margin:0; background:rgba(0,0,0,.2); transition:.3s; visibility:hidden; transform:rotateX(270deg); transform-origin:50% 0; transition:.3s; } a.sample10:hover::after { visibility: visible; transform: rotateX(0); }