大人可愛いお申込みボタンをデザインしました♡
コピペして
リンク先URLのところに
飛びたいリンク先URLを置き換えて
使ってください(*^^*)
文字を変えて
- お申込み
- お問い合わせ
- ご予約
- こちらをクリック
など色々使えますのでぜひ活用してね♪
リブログや紹介などして頂けるととても嬉しいです♡
スタンダードボタン・サーモンオレンジ
・キュートピンク
・シーブルー
くっきり枠付きボタン・ガーリーピンク
・リーフグリーン
・ソフトイエロー
ほわっと影付きボタン・シンプルホワイト
・クリアブルー
・ピンクオレンジ
ふわふわ綿あめボタン・キャンディオレンジ
・ベビーブルー
・スイートパープル
ワンポイントアドバイス
ボタンを真ん中に設置する方法
おすすめボタン一覧
使いやすいスタンダードボタン
お申込みはこちら ▶
<p> </p><div style="display:inline-block;background:#FD734A; padding:10px; border:none;solid #ff0000; border-radius:20px;“">
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="color:#ffffff;"><span style="font-weight:bold;"> お申込みはこちら ▶ </span></span></a></div></div><p> </p>
お申込みはこちら ▶
<p> </p><div style="display:inline-block;background:#FBC8B0; padding:10px; border:none;solid #ff0000; border-radius:20px;“">
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="color:#fc4c72;"><span style="font-weight:bold;"> お申込みはこちら ▶</span></span><span style="color:#cc0064;"><span style="font-weight:bold;"> </span></span></a></div></div><p> </p>
お申込みはこちら ▶
▼こちらをコピペ▼
<p> </p><div style="display:inline-block;background:#ABF1EA; padding:10px; border:none;solid #ABF1EA; border-radius:20px;“">
<div style="margin: 0px;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="color:#0080ba;"><span style="font-weight:bold;"> お申込みはこちら ▶ </span></span></a></div></div><p> </p>
くっきり枠付きボタン
お申込みはこちら ▶
▼こちらをコピペ▼
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="color:#ffffff;"><span style="font-weight:bold;"><span style="background-color:#FFADA5;">お申込みはこちら ▶ </span></span></a></div></div><p> </p>
お申込みはこちら ▶
▼こちらをコピペ▼
<p> </p><div style="display:inline-block;background:#ccffcc; padding:10px; border:2px solid #72B5A0;solid #ff0000; border-radius:20px;“">
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="font-weight:bold;"><span style="background-color: #ccffcc;">お申込みはこちら ▶ </span></span></a></div></div><p> </p>
お申込みはこちら ▶
▼こちらをコピペ▼
<p> </p><div style="display:inline-block;background:#ffff99; padding:10px; border:2px solid #FFE799;solid #FFE799; border-radius:20px;“">
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="color:#ff7f00;"><span style="font-weight:bold;"><span style="background-color: #ffff99;">お申込みはこちら ▶ </span></span></a></div></div><p> </p>
ほわっと影付きボタン
お申し込みはこちら ▶
▼こちらをコピペ▼
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="color:#404040;"><span style="font-weight:bold;"><span style="background-color: rgb(255, 255, 255);">お申し込みはこちら ▶</span></span></a></div></div><p> </p>
お申し込みはこちら ▶
▼こちらをコピペ▼
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="color:#005379;"><span style="font-weight:bold;"> お申し込みはこちら ▶</span></span></a></div></div><p> </p>
お申し込みはこちら ▶
▼こちらをコピペ▼
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="font-weight:bold;"><span style="background-color:#FC9D75);"> <span style="color:#ffffff;"> お申し込みはこちら ▶</span></span></a></div></div><p> </p>
ふわふわ綿あめボタン♡
お申込みはこちら ▶
▼こちらをコピペ▼
<p> </p><div style="display:inline-block;padding:10px; margin: 15px; background: #FFE4C4; box-shadow: #FFE4C4 0 0 10px 10px;solid #ff0000; border-radius:20px;“">
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="color:#ff7f00;"><span style="font-weight:bold;"><span style="background-color: rgb(255, 228, 196);">お申込みはこちら ▶</span></span></a></div></div><p> </p>
お申込みはこちら ▶
▼こちらをコピペ▼
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="color:#ffffff;"><span style="font-weight:bold;"><span style="background-color: #B0E0E6;">お申込みはこちら ▶</span></span></a></div></div><p> </p>
お申込みはこちら ▶
▼こちらをコピペ▼
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><span style="color:#f07dbe;"><span style="font-weight:bold;"><span style="background-color: #F4E3EB;">お申込みはこちら ▶</span></span></a></div></div><p> </p>
ボタンを真ん中にしたいとき
お申込みボタンをセンターに配置するときは
コピペしたHTMLの前に
<div style="text-align: center;">
最後に
</div>
を入れることで真ん中に配置されます♡
<div style="text-align: center;">ボタンHTML</div>
コピペしたHTMLの前に
<div style="text-align: center;">
最後に
</div>
を入れることで真ん中に配置されます♡
<div style="text-align: center;">ボタンHTML</div>
お問い合わせはこちら
<p> </p><div style="text-align: center;">
<div style="display:inline-block;background:#ffd6ea; padding:10px; border:none;solid #ff0000; border-radius:20px;“">
<div style="margin:0;"><a href="リンク先URL" style="text-decoration:none;" target="_blank"><a href="https://stat.ameba.jp/user_images/20210608/11/iroaiiroai/a9/61/p/o0016001614954237907.png"><img alt="" height="16" src="https://stat.ameba.jp/user_images/20210608/11/iroaiiroai/a9/61/p/o0016001614954237907.png" width="16"></a> お問い合わせはこちら</div></div></div><p> </p>
ボタンを設置すると
前後の文字が書けなくなっちゃったー！
なんて、お声をいただいたので
<p> </p>をつけて
ボタンの外へ
脱出できるようにしております♡
大人かわいいボタンなので
とっても使いやすいです(*^-^*)
ブログを魅力的に魅せたいかたは
ぜひ使ってみてくださいね♡
