【CSS】簡単にaタグをボタンにする方法

CSS CSS

aタグのボタン

aタグのボタン

サイトでボタンを作る時には様々な方法があります。
専ら画像を使うことが多いですが、cssだけで簡単におしゃれなボタンを作ってみましょう。
HTMLは簡単にaタグだけで、

classはcssで設定しますのでそのままで。
title、href、内容はご自由に

 

cssはこんな感じです。
classの前にaタグを指定していますが無くても問題ありません。
他に影響が出ないようにと、他の影響を受けにくくするために入れています。

最初にa.a_button{で通常時の設定です。
肝はdisplay:block;です。

aタグはインライン要素なんですがそのまま装飾しても設定が上手く反映されません。
ブロック要素にしてあげることで様々な調整が出来るようになります。

 

hoverとafterに関してはついでです。

hover時はボタンぽっく色を入れ替えるようにしています。
afterはリンクっぽくするために右の三角を装飾として入れています。

 

これでclassを指定したaタグ全部がボタンになります。

コメント

タイトルとURLをコピーしました