今回は、ホバー時などのアニメーションを使用しないシンプルなCSSボタンデザインを紹介していきます。ボタンの種類は随時追加していきます。
シンプルなCSSボタンデザイン
アニメーションは付けないけど見た目に少しこだわったボタンをサイト内に設置したい場合があると思います。サイトのデザインや、テーマカラーによって配置するボタンのデザインは異なりますが、シンプルなサイトからこだわりのサイトまで、多くのサイトに合うCSSを使用したボタンを紹介します。
※コードはコピーしてご自由にお使いください。
基本的な長方形のボタン
よくある長方形のボタンを作成する場合は下記の記述になります。
※HTMLの記述はクラスが異なるだけで他は同じなので、以降省きます。
<a href="#" class="btn">詳細を見る</a>.btn{
text-align:center;
font-size:13px;
font-weight:700;
width:200px;
padding:10px 0;
margin:0 auto;
background:#5982bf;
color:#fff;
box-sizing:border-box;
display:block;
}角丸長方形のボタン
次は長方形から四方が角丸に変わっただけのシンプルなボタンです。
長方形から追加されるCSSは一番下の「border-radius」のみです。
.btn{
text-align:center;
font-size:13px;
font-weight:700;
width:200px;
padding:10px 0;
margin:0 auto;
background:#5982bf;
color:#fff;
box-sizing:border-box;
display:block;
border-radius:5px;
}横が丸い横長ボタン
次は横が丸くなっているボタンです。
角丸ボタンと同じく「border-radius」を使い、値を大きくすることで実現可能です。
.btn{
text-align:center;
font-size:13px;
font-weight:700;
width:200px;
padding:10px 0;
margin:0 auto;
background:#5982bf;
color:#fff;
box-sizing:border-box;
display:block;
border-radius:50px;
}枠線ボタン
長方形の背景色なしで枠線のみ付いたボタンです。
.btn{
text-align:center;
font-size:13px;
font-weight:700;
width:200px;
padding:10px 0;
margin:0 auto;
border:2px solid #5982bf;
color:#5982bf;
box-sizing:border-box;
display:block;
}枠線角丸ボタン
実例紹介は省きますが「border-radius」の値を大きくすることで、背景色ありボタンと同じく横を丸くすることができます。
.btn{
text-align:center;
font-size:13px;
font-weight:700;
width:200px;
padding:10px 0;
margin:0 auto;
border:2px solid #5982bf;
color:#5982bf;
box-sizing:border-box;
display:block;
border-radius:5px;
}破線ボタン
枠線のスタイル指定（下記の例では「dashed」の部分）を変更することで線種を変更することが可能です。もちろん角丸指定を追加することも可能です。
.btn{
text-align:center;
font-size:13px;
font-weight:700;
width:200px;
padding:10px 0;
margin:0 auto;
border:2px dashed #5982bf;
color:#5982bf;
box-sizing:border-box;
display:block;
}枠線＋矢印アイコン付きボタン
.btn{
text-align:center;
font-size:13px;
font-weight:700;
width:200px;
padding:10px 0;
margin:0 auto;
border:2px solid #5982bf;
color:#5982bf;
box-sizing:border-box;
display:flex;
justify-content:center;
gap:10px;
}
.btn::after{
content:url(arrow.svg);
width:8px;
}
前へ
