【HubSpot】汎用的にカスタマイズ可能なボタンモジュールを作成する

<div class="test-button-wrapper">
　<!-- 位置合わせフィールドで選択された値をクラス名として付与 -->
　<a href="{{ module.link_field.url.href }}" class="test-button {{ module.style.alignment_field.horizontal_align|lower }}">
　　<span class="test-button-icon">
　　　<!-- アイコンフィールドを呼び出し -->
　　　{% icon
　　　　name="{{ module.style.icon_field.name }}"
　　　　style="{{ module.style.icon_field.type }}"
　　　　unicode="{{ module.style.icon_field.unicode }}"
　　　　icon_set="{{ module.style.icon_field.icon_set }}"
　　　%}
　　</span>
　　<span class="test-button-text">{{ module.text_field }}</span>
　</a>
</div>

{% require_css %}
<style>
{% scope_css %}
/* 間隔フィールドとの連携を行いボタンを囲むdivへマージンやパディングを付与 */
.test-button-wrapper {
　margin-top: {{ module.style.spacing_field.margin.top.value }}px;
　margin-bottom: {{ module.style.spacing_field.margin.bottom.value }}px;
　padding-right: {{ module.style.spacing_field.padding.right.value }}px;
　padding-bottom: {{ module.style.spacing_field.padding.bottom.value }}px;
　padding-top: {{ module.style.spacing_field.padding.top.value }}px;
　padding-left: {{ module.style.spacing_field.padding.left.value }}px;
}

.test-button {
　/* 角丸のスタイルフィールドとの連携 */
　border-radius: {{ module.style.number_field }}px;
　/* 背景色設定のスタイルフィールドとの連携 */
　background-color: {{ module.style.bg_color_field.color }};
}

/* 位置合わせフィールドで.leftクラスが付与された場合 */
.test-button.left {
　margin-right: auto;
}
/* 位置合わせフィールドで.centerクラスが付与された場合 */
.test-button.center {
　margin-inline: auto;
}
/* 位置合わせフィールドで.rightクラスが付与された場合 */
.test-button.right {
　margin-left: auto;
}

/* マウスオーバー時に背景色を変更する */
@media (hover: hover) {
　.test-button:hover {
　　background-color: {{ module.style.hover_bg_color_field.color }};
　}
}
{% end_scope_css %}
</style>
{% end_require_css %}

/* ボタンにあらかじめ設定するスタイル */
.test-button {
　display: flex;
　align-items: center;
　width: max-content;
　padding: 16px 48px;
　transition: 0.4s;
}

.test-button-text {
　margin-left: 8px;
　font-weight: bold;
　font-size: 16px;
　line-height: 1.7;
　letter-spacing: 0.1em;
　color: #ffffff;
}

.test-button-icon svg {
　display: block;
　width: 24px;
}

.test-button-icon svg path {
　fill: #ffffff;
}