DEMO

HTML

		<div class="acbtn">
 <a href="LINEのリンク" class="btn line">
  <img src="http://sw12.sakura.ne.jp/osaka-designers/wp-content/uploads/2023/07/LINE.png" alt="LINE画像">LINEで応募する
 </a>
</div>
	
<div class="acbtn">
 <a href="電話番号リンク" class="btn phone">
  <img src="http://sw12.sakura.ne.jp/osaka-designers/wp-content/uploads/2023/07/tel2.png" alt="電話画像2">電話で応募する
 </a>
</div>
	
<div class="acbtn">
 <a href="メールアドレスリンク" class="btn mail">
  <img src="http://sw12.sakura.ne.jp/osaka-designers/wp-content/uploads/2023/07/mail.png" alt="メール">メールで応募する
 </a>
</div>

		

HTML説明

本文の設定方法
「各リンク（2.8.14行目）」のテキストを任意のテキストに書き換えてください。
ガールズヘブン管理画面(DXフリースペース編集画面)にあるリンクを置き換えていただくのが便利です。
その際は <a href="●●">の●●部分を置き換えてください。

ボタンの増減方法
「<div>～</div>(1~5.7~11.13~17行目)」が1つのボタンの記述です。
削除する場合や増やす場合は該当する箇所の記述を増減させてください。

CSS

		<style>
a{
 text-decoration: none;
}
.acbtn{
 margin: 3px 0 0 0;
}
.btn{
 display: flex;
 align-items:center;
 width: 50%;
 max-width: 250px;
 height: 40px;
 padding: 7px;
 font-size: .9em;
 font-weight: bold;
 border-radius: 5px;
}
.btn img{
 width: 40px;
}
.line{
 background:  linear-gradient(0deg, #1ac81a 0%, #37e437 100%) no-repeat;;
 color: #FFF;
}
.phone{
 background:  linear-gradient(0deg, #fc6905 0%, #ff9146 100%) no-repeat;;
 color: #FFF;
}
.mail{
 background:  linear-gradient(0deg, #00a0e9 0%, #33c3f8 100%) no-repeat;;
 color: #FFF;
}
</style>

		

CSS説明

各サイズの設定方法
「各数値（12.13.15.20行目）」を任意の数値に書き換えてください。
12行目＝ボタンの横幅
13行目＝ボタンの高さ
15行目＝フォントサイズ
20行目＝アイコン画像のサイズ