立体フレームボタン

<div style="
/* 角を丸める 20px */
border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;
/* フレーム内余白 */
padding:10px;
/* ボタン幅 (必要な時に入れる) ボタンをセンターに寄せるときは <div align="center" ～ で*/
/* width:200px; */
/* フレーム内のテキストをセンターに寄せる */
text-align:center;
/* フレームの背景色 */
background:#8AB238;
/* フレーム枠を付ける */
border-style:1px; #D9D9D9 solid;
/* フレームに影を付ける */
box-shadow:2px 2px 4px #fff inset;"
/* Aタグ テキストリンク用のクラス指定 */
class="jmplnk"
>

<a href="URL" target="_blank">リンクテキスト</a>

</div>

/* Aタグ テキストリンククラス */
<style>
/* Aタグ テキストリンクの文字指定 */
.jmplnk {
/* フォントサイズ */
font-size:22px;
/* フォント太字 */
font-weight:bold;
}
/* Aタグ テキストリンクの文字色 */
.jmplnk a{
color:#ffffff;
/* Aタグのアンダーバーを消す */
text-decoration:none;
}
/* Aタグ テキストリンクのマウスオーバー時の色 */
.jmplnk a:hover{
color:#09632E;
}
</style>

 

コピペ用 フレームボタン (立体)

<div style="border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;padding:10px;text-align:center;background:#8AB238;border-style:1px; #D9D9D9 solid;box-shadow:2px 2px 4px #fff inset;" class="jmplnk"><a href="URL" target="_blank">リンクテキスト</a></div>
<style>
.jmplnk {
font-size:22px;
font-weight:bold;
}
.jmplnk a{
color:#ffffff;
text-decoration:none;
}
.jmplnk a:hover{
color:#09632E;
}
</style>

フレームボタン サンプル (立体)

 

フレームボタン

<div style="
/* 角を丸める 20px */
border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;
/* フレーム内余白 */
padding:10px;
/* ボタン幅 (必要な時に入れる)*/
/* width:200px; */
/* フレーム内のテキストをセンターに寄せる */
text-align:center;
/* フレームの背景色 */
background:#8AB238;
/* フレーム枠を付ける */
border-style:1px; #D9D9D9 solid;
/* Aタグ テキストリンク用のクラス指定 */
class="jmplnk"
>

<a href="URL" target="_blank">リンクテキスト</a>

</div>

/* Aタグ テキストリンククラス */
<style>
/* Aタグ テキストリンクの文字指定 */
.jmplnk {
/* フォントサイズ */
font-size:22px;
/* フォント太字 */
font-weight:bold;
}
/* Aタグ テキストリンクの文字色 */
.jmplnk a{
color:#ffffff;
/* Aタグのアンダーバーを消す */
text-decoration:none;
}
/* Aタグ テキストリンクのマウスオーバー時の色 */
.jmplnk a:hover{
color:#09632E;
}
</style>

 

コピペ用 フレームボタン

<div style="border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;padding:10px;text-align:center;background:#8AB238;border-style:1px; #D9D9D9 solid;" class="jmplnk"><a href="URL" target="_blank">リンクテキスト</a></div>
<style>
.jmplnk {
font-size:22px;
font-weight:bold;
}
.jmplnk a{
color:#ffffff;
text-decoration:none;
}
.jmplnk a:hover{
color:#09632E;
}
</style>

フレームボタン サンプル