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

aタグのボタン
↓
aタグのボタン

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

<a class="a_button" title="aタグのボタン" href="#">aタグのボタン</a>

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

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

a.a_button{ 
	display: block; 
	background: #0021d0; 
	border:1px solid #0021d0; 
	color: #FFF; 
	padding: 10px; 
	text-decoration: none; 
	font-size: 1.2em; 
	border-radius: 10px; 
	max-width: fit-content; 
	position: relative; 
	transition: .5s; 
} 
a.a_button:hover{ 
	background: #FFF; 
	color: #0021d0; 
	transition: .5s; 
} 
/*ついでに装飾*/ 
a.a_button:after{ 
	content:"25b6"; 
	padding:0 0 0 5px; 
	font-size:1em; 
}

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

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

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

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

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