吹き出しつきボタン

概要

ボタンにさらに訴求ポイントを追加したいときに使えるパターンです。
期間限定のアピールや注目を集めたいボタンなどにお使いいただけます。

デモ

ここにテキスト

ボタンテキスト

html/css

See the Pen 吹き出し付きボタン by hbm-design (@hbm-design) on CodePen.

カスタマイズ

ボタンの色を変更

.button-balloon-wrapper button {
    background: 任意の背景色;
    color: 任意の文字色;
}

吹き出しの色を変更

.button-balloon-wrapper div {
    background: 任意の吹き出しの背景色;
    color: 任意の文字色;
    border: 2px solid 任意の吹き出し枠の色;
}
.button-balloon-wrapper div::before {
    background: 任意の吹き出し枠の色;
}