CSSで利用可能なボタン

ボタンに表示させるテキストも1行で最大11文字であれば概ね問題なく表示されます。
例) <div class="spq--btn-center"><a href=" (※ここを変更)" class="org-btn btn--orange">お問い合わせはこちら</a></div>

1.角枠

<div class="spq--btn-center"><a href="URL" class="org-btn btn--orange">お問い合わせはこちら</a></div>

2.丸枠

<div class="spq--btn-center"><a href="URL" class="org-btn btn--orange btn--radius">お問い合わせはこちら</a></div>

3.二行角枠

<div class="spq--btn-center"><a href="URL" class="org-btn btn--orange">PUSH !<br>お問い合わせはこちら<br>ボタン</a></div>

4.二行丸枠

<div class="spq--btn-center"><a href="URL" class="org-btn btn--orange btn--radius">お問い合わせ<br>ボタン</a></div>

5.電話アイコン付き二行角枠

<div class="spq--btn-center"><a href="URL" class="org-btn btn--orange"><i class="fas fa-phone-alt fa-position-left"></i>お電話はこちら<br>0120-12-3456</a></div>

6.緑角枠(影付き)

<div class="spq--btn-center"><a href="URL" class="org-btn btn--green btn--cubic btn--shadow">お問い合わせはこちら</a></div>

7.オレンジ角枠(影付き)

<div class="spq--btn-center"><a href="URL" class="org-btn btn--orange btn--cubic btn--shadow">お問い合わせはこちら</a></div>

8.二重線

<div class="spq--btn-center"><a href="URL" class="org-btn btn--blue btn--border-double btn--shadow">お問い合わせはこちら</a></div>

9.黒枠+緑

<div class="spq--btn-center"><a href="URL" class="org-btn btn--green btn--border-groove">お問い合わせはこちら</a></div>

10.ポップボタン

<div class="spq--btn-center"><a href="URL" class="org-btn btn-c easy"><i class="fas fa-hand-point-right"></i>まずは<span>カンタン登録</span>!<small>(30秒)</small></a></div>

11.資料アイコン付き黄角枠

<div class="spq--btn-center"><a href="URL" class="org-btn btn-c free0 btn--yellow btn--cubic"><i class="fa far fa-file-alt"></i>無料入会はこちら
</a></div>

13.モダン角枠

<div class="spq--btn-center"><a href="URL" class="org-btn btn-radius-solid">お問い合わせはこちら<i class="fas fa-angle-right fa-position-right"></i></a></div>

14.スライドアニメーションボタン

<div class="spq--btn-center"><a href="URL" class="org-btn btn-flat"><span>お問い合わせはこちら</span></div>

15.フェード反転

<div class="spq--btn-center"><a href="URL" class="org-btn btn-border">お問い合わせはこちら</a></div>

16.矢印付角枠ボタン

<div class="spq--btn-center"><div class="btn-wrap btn-wrap-pc-sp2">
<a href="URL" class="org-btn btn--contact">
<i class="fas fa-envelope fa-position-left"></i>
お問い合わせはこちら
<i class="fas fa-angle-right fa-position-right"></i>
</a></div></div>

17.電話番号入り角丸ボタン

<div class="spq--btn-center"><a href="tell:phonenum" class="org-btn btn--tel">
<i class="fas fa-phone-volume fa-position-left"></i>
お電話でのお問い合わせはこちら
<span class="number phone-number">TEL：0120-12-3456</span>
<i class="fas fa-angle-right fa-position-right">
</a></div>

18.二行別枠アニメーションボタン

<div class="spq--btn-center"><a href="URL" class="org-btn btn-c free1"><span>お問い合わせと資料請求はコチラ！</span><br>資料請求をする（無料）</a></div>

19.無料帯付き黄色ボタン

<div class="spq--btn-center"><div class="btn-wrap btn-wrap">
<a href="URL" class="org-btn btn-c free2">新規入会はこちら</a>
</div></div>

カスタムする場合

共通：aのclassにorg--btnを設定
色：btn--orange / btn--yellow / btn--blue / btn--green のいずれかを設定
ボタンの形状を変える：btn--radius / btn--cubic
影をつける：btn--shadow
※一部適用されないケースもあります。