ワードプレスで使えるカスタムHTMLと追加CSSで作るシンプルなボタンの作り方の紹介です。ワードプレスでは標準のボタンもありますが、少しオリジナリティを出したいときにおすすめです。
↑作るボタンはこんな感じのシンプルなものです。
Contents
シンプルボタンの作り方
ボタンはカスタムHTMLと追加CSSで作ります。
ワードプレスの場合は、ページの編集画面で、ブロックを追加から「カスタムHTML」をクリックして以下のコードを入力（コピペでOKです）してください。
<div class="button_wrap">
<a href="リンク先URL">
<div class="button">ボタンのテキスト</div>
</a>
</div>リンク先URLとボタンのテキストは、ご自分のホームページに合わせて書き換えてください。
次に、ダッシュボード「外観」＞「カスタマイズ」をクリックし、「追加CSS」をクリニックして以下のコードを追加（コピペでOKです）してください。
.button_wrap{
text-align:center;
margin: 20px 0;
}
.button{
color: #fff;
display: inline-block;
border: 1px solid #000;
padding: 10px 20px;
background: #000;
transition: 0.5s;
}
.button:hover{
color: #000;
background: #fff;
transition: 0.5s;
}位置や色の変更方法
button_wrapクラスでボタンの配置を決めています。text-align: centerなので中央寄せに設定しています。左寄せなら text-align: left 、右寄せなら text-align: right に変更します。
buttonクラスは、ボタン本体のデザインです。
color: #fff; 文字色（白）
border: 1px solid #000; 枠線（黒）
background: #000; 背景色（黒）
となっておりますので、#（R＝赤、G＝緑、B＝青）の部分を変えれば色の設定を変えられます。
button:hoverで、ボタン上にマウスが乗ったときの色を変えています。
color: #000; 文字色（黒）
background: #fff; 背景色（白）
に設定してありますので、こちらも#の部分を変更すれば色を変えられます。
まとめ
ワードプレスでホームページをを作る場合、標準のボタンもありますが、少しデザインを変えるだけで雰囲気が変わってくると思います。
ネットを検索するとCSSで作るボタンデザインは沢山出てきて迷ってしまうかもしれません。でも、実際、あまり凝ったものよりシンプルなデザインのボタンで十分だったりします。
以上、カスタムHTMLと追加CSSで作るシンプルなボタンの作り方をご紹介させていただきました。
