Bootstrapでダウンロードボタンを作る

お知らせ: Bootstrapで紫のカスタムボタンを作る 投稿をエントリしました。

とりあえず上の様な感じに
(JetThemeでもBootstrapが使われているので、特にCSSの用意の必要がなくボタンを作成できます。)

コード

<a href="#">
<button type="button" class="btn text-white" style="background-color: #3ddc84;"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 48 48"><path d="M11 40q-1.2 0-2.1-.9Q8 38.2 8 37v-7.15h3V37h26v-7.15h3V37q0 1.2-.9 2.1-.9.9-2.1.9Zm13-7.65-9.65-9.65 2.15-2.15 6 6V8h3v18.55l6-6 2.15 2.15Z" fill="#fff"/></svg> Download</button>
</a>

ダウンロードのSVGアイコンはここでは Google Material icons (マテリアル シンボル) を使用しています

• Material Symbols and Icons - Google Fonts

追記
JetThemeは専用のコードがありますね
Icons dan Button - JetTheme
https://www.jettheme.com/2021/03/icons-dan-button.html

<a class="btn jt-btn-primary mb-2 me-2" href="#"><svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-download"/></svg> Download Here</a>

ボタンの色はオレンジですが

更に追記

<a> 要素での使用例

<a class="btn text-white" href="#" role="button" style="background-color: #3ddc84;" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
  <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
  <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
</svg> Download</a>

(Bootstrap Icons を使用)

Download