CTAボタンの作成

イマイチ洗練できなかった「B-box」を改造して「CTA-btn1」シリーズを作ってみる。

B-boxの仕様確認

本体「B-box」とマイクロコピー「B-box-voice」とコメント「B-box-comment」を含む「B-box-wrap」を横並びで包含する「wrap-row」

2つのボタンを並べる場合は、ラッパーに追加クラス「double」を指定する。flex-growを0にして、fles-basisで幅をcalc(10em + 35vw)指定する。max-widthを併用して最大幅を指定

\ お気軽にどうぞ♪ /
(問い合わせフォームが開きます)
\ 2分で簡単に終了 /
無料で
学習相談
(学習相談フォームが開きます)

一段での使用その3

ラッパーに追加クラス「single」を指定する。flex-growを0にして、fles-basisで幅をcalc(11em + 22vw)指定する。max-widthを併用して最大幅を指定

\ お気軽にどうぞ♪ /
((問い合わせフォームに移動します))

CTA-btn1の仕様

一番外側にコンテナ「btn-ctr1」flex指定。中に「CTA-btn-wrap」を単独か2つ並べる。固定幅にする。

wrapの中に「voice」「btn」「cmt」を入れる。ボタンには色のバリエーションをつける。(追加クラス)

リンクには「xtd-link1」クラスを指定する

試作シングル

\相談は完全無料です/
(申し込みフォームが開きます)

色が良くないかな?

試作(ダブル)

コンテナに「double」を追加すると、中のwrapの幅が少し狭くなる。

\相談は完全無料です/
(申し込みフォームが開きます)
\良かったら見てね/
(プロフィールに移動します)

ただ…CTAボタンが2つ並ぶのは良くない気がする。

試作(カラーバリエ)

「C1」「C2」を追加すると、色違い。こちらの色の方が押したくなるかな

\相談は完全無料です/
(申し込みフォームが開きます)
\良かったら見てね/
(プロフィールに移動します)

縁の色がはみ出ているようなおかしな感じ…なぜ?borderをnoneと明示的に指定したら直った…

タイトルとURLをコピーしました