アンカーリンクだけで作るシンプルなリンクボタン

2023-08-01 by スキマデザイン

アンカーリンクだけで作るとってもシンプルなボタンです。
おまけで、背景色のアニメーション変化つきです。

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が一行で記述できて、コードもすっきりです。
色やボタン内の余白はお好みで調整してくださいね。

以上になります。