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を併用して最大幅を指定

一段での使用その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と明示的に指定したら直った…

CTA-btn1デザイン詰め直し

横並び(double)は廃止。wrapの幅は可変に。色は暖色系で末尾に「≫」を付ける(今の所インラインでCSS指定。そのうちafter要素にでも？)。

色のバリエーション(C2)

色のバリエーション(C3)

どうかな？これで実践に投入