【html/CSS】aタグをボタンにするシンプルかつ基本的な方法

「aタグリンクをもっと目立つようにボタンにしたい！」

aタグをボタンにする方法を紹介します。

ここではシンプルかつ基本的な方法をCSSひとつひとつ丁寧に紹介します。

CSSはよくわからんからhtmlだけでボタンをつくりたい！というかたはこちら↓

【完成形】aタグをボタンにする

下記のようなボタンを作ります。

ボタン

ソースは下記のとおりです。

<style>
.example{
    display: block;
    width: 300px;
    padding: 15px 0;
    margin: auto;
    background: #569f3c;
    color: #FFF;
    text-decoration: none;
    text-align: center;
}
.example:hover{
    background: #225f0d;
}
</style>
<a href="#" class="example">ボタン</a>

ソースを一行ずつ解説します。

HTML

htmlは下記のとおりです。

<a href="#" class="example">ボタン</a>

↓このまま表記すると下記のようになります。

ボタン

ご覧の通りふつうのaタグのリンクです。これにCSSをかけてボタンらしくしていきます。

hrefの値は任意のリンク先を指定しましょう。

classの値は、後で記載するCSSとつなげるための名前をつけましょう。

CSS

display:block（widthを効かせる）

aタグはインライン要素であり、そのままでは横幅(width)を変えられません。

そこでdisplay:blockを指定します。

display:blockを指定するとインライン要素であってもブロック要素にすることができます。

これによりwidthが効くようになります。

width（幅）

widthは横幅を指定するCSSです。

数値はもちろん任意ですが、300px以内ならスマホでも収まることが多いです。

padding（上下の余白）

paddingは要素の内側の余白を指定するCSSです。

高さを指定といえばheightですが、paddingで指定するとテキストが上下中央に来るためおススメです。

paddingの値は上下左右を指定できます。下記のように指定すると上下、左右それぞれ指定できます。

具体例

padding: 15px 0

padding: 15px 0と指定すると文字の上下に15pxずつの余白ができ、左右には余白がない状態になります。

実際は横幅いっぱいに文字がない限り、左右に余白ができます。

中に入る文字数や横幅に合わせて値を調整しましょう。

margin:auto（ボタンを中央寄せ）

margin:autoをブロック要素に指定するとその要素を中央寄せできます。

display:blockでブロック要素にしたため、margin:autoで中央寄せします。

background（背景色）

backgroundは背景を指定するCSSです。

これでボタンの色を指定します。

目立たせたいのであれば濃いめの色がおススメです。

color（文字の色）

colorは文字の色を指定するCSSです。

aタグは青文字です。背景色によっては文字が見づらくなるでしょう。

背景色とのコントラストを意識しながら黒か白文字にするといいでしょう。

text-decoration:none（下線を消す）

text-decoration:noneは下線を消すCSSです。

aタグについている下線を消すために指定します。

text-align:center（文字を中央寄せ）

text-align:centerは子要素のインライン要素を中央寄せするCSSです。

ボタン自体の中央寄せはmargin:autoでしたが、text-align:centerはボタンの中の文字を中央寄せするために指定します。

:hover（マウスを乗せたとき）

.example:hover{
    background: #225f0d;
}

:hoverセレクタにくっつけて使う疑似クラスであり、マウスを乗せたときのCSSを指定します。

ボタンは押されることに意味があります。マウスを乗せたときに変化があるとボタンであることがわかりやすいでしょう。

ここではわかりやすくボタンの背景色を変化させています。

【まとめ】aタグをボタンにする方法

1. display:blockでwidthを効かせる
2. widthとpaddingで幅と高さ
3. backgroundとcolorで色
4. margin:autoとtext-align:centerで中央寄せ
5. text-decoration:noneで下線を消す
6. :hoverでマウスを乗せたときのCSSを指定

いきなり難しいボタンを作ろうとせず、シンプルなボタンから作って行きましょう。

この基本形ができればオリジナルのボタンを作ることができます。

以上、aタグをボタンにするシンプルかつ基本的な方法でした。