アンカーリンクだけで作るシンプルなリンクボタン
アンカーリンクだけで作るとってもシンプルなボタンです。
おまけで、背景色のアニメーション変化つきです。
HTML
<p class="Btn-wrap"><a href="#" class="Btn">詳細 ≫</a></p>
CSS
ボタンは左右中央に配置指定。
白背景に黒文字のボタンが、カーソルを置くと、黒背景の白文字にアニメーション変化します。
p.Btn-wrap {
text-align:center;
}
a.Btn{
background:#fff;
border: 1px solid #000;
display: inline-block;
padding: 15px 0;
text-align: center;
color: #000;
font-size: 16px;
transition: 1.0s;
}
a.Btn:hover{
background:#000;
color: #fff;
}
HTMLが一行で記述できて、コードもすっきりです。
色やボタン内の余白はお好みで調整してくださいね。
以上になります。