以前に「CSSだけでフラットデザインのボタンを作る方法」という記事を書きました。
今回はその続編として「ゴーストボタンを作る方法」をご紹介します。
サイトやブログのデザインが苦手な方でも画像を使わずに、この記事に書いてあるCSSを順番に読んでいくだけでボタンを作れるのでぜひお試しください。
CSSだけでゴーストボタンを作る方法
▼ゴーストボタンとはこんな具合に背景が透けたボタンです。ここ1,2年でよく使われるようになった手法ですね。
これを作るためのHTMLがこちら。
<div class="ghost-btn"> <a href="遷移先のURL">ghost btn</a> </div>
aタグだけでも良さそうですけども、個人的にはdivで囲った方が好みです。
CSSはこんな感じです。
.ghost-btn a {
border: 4px solid #fff;
color: #fff;
display: block;
font-size: 18px;
font-weight: bold;
line-height: 1;
margin: 30px auto;
padding: 15px 0;
text-align: center;
text-decoration: none;
width: 240px;
}
これを見て理解できる方はコピペでいいんですけども、HTML,CSSが苦手な方のために順番に解説していきますね。
ボタンの枠となるボーダーを付ける
まずゴーストボタンを形成する大事な要素「ボーダー」から。
border: 4px solid #fff;と書きましたが、borderと書くことで上下左右のボーダーという意味になり、そこから「太さ・線の種別・色」という具合に指定していきます。
今回のコードでは「上下左右に4pxの太さの直線を白色で」という意味になります。
テキストをボーダーと同じ色に
ボーダーとテキストの色を揃えます。colorというのはテキストの色を決めるプロパティですので、こちらで同じ色を指定しましょう。
テキストの諸々調整
font-sizeでテキストの大きさを、font-weightでフォントの太さを指定します。こちらはお好みで。
text-align: center;でテキストを中央に寄せます。これが左に寄ったままだとボタンっぽくなくなってしまいますからね。
text-decoration: none;はテキストリンクの下線を消す記述です。
当たり判定を設定
display: block;を入れることでボタン全体に当たり判定がつきます。これを書かないとテキストの部分を押さないと反応しない状態になってしまうんです。
また、これを入れないとwidthが効かずに幅を指定することもできません。
細かい理屈は割愛しますが、気になる人は調べてみてください。
幅を決める
display: block;を入れた途端に幅が画面いっぱいに広がってしまいましたので、ボタンの大きさを決めるためにwidthで好きな値を入れましょう。
スマホのことを考えてあまり大きなサイズにはしない方が良いと思います。
高さを決める
高さは通常heightで指定しますが、今回はpaddingだけで十分かと思ったので、「ボーダーとテキストの間に上下10pxの余白を入れる」という意味でpadding: 10px 0;と書きました。
また、line-height: 1;を書いてるのは全体にline-heightの値が指定されてることが多くてそのせいで上下の余白が均等に入らないということが起こりがちなため一応リセットさせる意味で入れました。
ボタンを画面の中央に設置
最後にボタンの位置を調整します。margin: 30px auto;の30pxはボタンの上下の余白、autoは「中央に寄せる」という意味です。
最後に
CSSだけでゴーストボタンを作りたい場合は今回のコードを参考に作ってみてください。
ボタンに丸みを持たせたいという方はborder-radiusを数ピクセル分与えてもいい感じに仕上がると思いますよ。