自分で組み立てるテンプレート

ボタンパーツ

黒、青、白、オレンジのカラーは、theme.cssの :rootにしているカラーコードが適用されます。各パーツに直接カラーを指定してもOKだし、この :root のカラーコードを好みのテーマカラーに調整して頂いてもOK。

ボタンパーツ一覧

絞り込み検索

btn-animation1

マウスオンで枠線がアニメーションされるボタン。

html

/*btn-animation1 アニメーションボタン（枠線をぐるっとなぞるアニメーション）
---------------------------------------------------------------------------*/
@keyframes w {0% {width: 0px;} 100% {width: 100%;}}
@keyframes h {0% {height: 0px;} 100% {height: 100%;}}

/*ボタン*/
.btn-animation1-parts {
	position: relative;		/*枠線をアニメーションさせる為に必要な指定*/
	box-shadow: 0px 0px 0px 1px #ccc inset;	/*デフォルトで見えている枠線の設定*/
}
.btn-animation1-parts a {
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 0.5rem 2rem;	/*上下に0.2文字分、左右に2文字分の余白。*/
}

/*テキスト量にあったサイズ用*/
.btn-animation1-parts.fit {
	width: fit-content;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn-animation1-parts.fit.c {
	margin: 0 auto;
}

/*枠線共通*/
.btn-animation1-parts::before,
.btn-animation1-parts::after,
.btn-animation1-parts a::before,
.btn-animation1-parts a::after {
	content: "";
	position: absolute;
	background-color: #666;		/*background(背景)スタイルですが、hover時の枠線の色になります。*/
	animation-duration: 0.2s;	/*アニメーションにかける時間。１辺あたり0.2秒。*/
	animation-fill-mode: forwards;	/*アニメーション完了時に最後のフレームを維持。この１行を外してみると別の動作になって面白い動きになります。*/
	animation-timing-function: linear;	/*アニメーションの速度のタイプ。同じ速度にする。*/
}

/*ラインアニメーション１（左上→右上）*/
.btn-animation1-parts:hover::before {
	left: 0px;				/*開始地点の指示*/
	top: 0px;				/*開始地点の指示*/
	height: 1px;			/*線の幅の代わりになります*/
	animation-name: w;		/*上の「@keyframes」で使うアニメーション名の指定。*/
}

/*ラインアニメーション２（右上→右下）*/
.btn-animation1-parts:hover::after {
	right: 0px;				/*開始地点の指示*/
	top: 0px;				/*開始地点の指示*/
	width: 1px;				/*線の幅の代わりになります*/
	animation-name: h;		/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.2s;	/*アニメーションを0.2秒遅れてスタートさせる。*/
}

/*ラインアニメーション３（右下→左下）*/
.btn-animation1-parts a:hover::before {
	right: 0px;				/*開始地点の指示*/
	bottom: 0px;			/*開始地点の指示*/
	height: 1px;			/*線の幅の代わりになります*/
	animation-name: w;		/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.4s;	/*アニメーションを0.4秒遅れてスタートさせる。*/
}

/*ラインアニメーション４（左下→左上）*/
.btn-animation1-parts a:hover::after {
	left: 0px;				/*開始地点の指示*/
	bottom: 0px;			/*開始地点の指示*/
	width: 1px;				/*線の幅の代わりになります*/
	animation-name: h;		/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.6s;	/*アニメーションを0.6秒遅れてスタートさせる。*/
}

css

btn-side1

縦書きのボタン。親要素にrelativeがあるとそちらに対して絶対配置されるので注意して下さい。

html

css

btn1

シンプルなボタン

<h2>btn1-parts</h2>

</section>

<h2>親のボックスに対して幅100%になるタイプ。</h2>

<p>▼ btn1-parts</p>
<div class="btn1-parts"><a href="#">ボタン</a></div>

<p>▼ btn1-parts primary</p>
<div class="btn1-parts primary"><a href="#">ボタン</a></div>

<p>▼ btn1-parts light</p>
<div class="btn1-parts light"><a href="#">ボタン</a></div>

<p>▼ btn1-parts accent</p>
<div class="btn1-parts accent"><a href="#">ボタン</a></div>

</section>

<h2>テキスト量にあったサイズになるタイプ。fitを追加する。</h2>

<p>▼ btn1-parts fit</p>
<div class="btn1-parts fit"><a href="#">ボタン</a></div>

<p>▼ btn1-parts primary fit</p>
<div class="btn1-parts primary fit"><a href="#">ボタン</a></div>

<p>▼ btn1-parts light fit</p>
<div class="btn1-parts light fit"><a href="#">ボタン</a></div>

<p>▼ btn1-parts accent fit</p>
<div class="btn1-parts accent fit"><a href="#">ボタン</a></div>

</section>

<h2>テキスト量にあったサイズになり、左右中央に配置されるタイプ。fit cを追加する。</h2>

<p class="c">▼ btn1-parts fit c</p>
<div class="btn1-parts fit c"><a href="#">ボタン</a></div>

<p class="c">▼ btn1-parts primary fit c</p>
<div class="btn1-parts primary fit c"><a href="#">ボタン</a></div>

<p class="c">▼ btn1-parts light fit c</p>
<div class="btn1-parts light fit c"><a href="#">ボタン</a></div>

<p class="c">▼ btn1-parts accent fit c</p>
<div class="btn1-parts accent fit c"><a href="#">ボタン</a></div>

</section>

<h2>Font Awesomeのアイコンとセットで使ってもOK</h2>
<p>他のアイコンを探したい場合は、<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>サイトをご覧下さい。</p>
<div style="display:flex;flex-wrap:wrap;gap:1rem;">
<div class="btn1-parts primary fit"><a href="#"><i class="fa-solid fa-circle-chevron-right"></i> ボタン</a></div>
<div class="btn1-parts primary fit"><a href="#"><i class="fa-solid fa-square-caret-right"></i> ボタン</a></div>
<div class="btn1-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-caret-right"></i></a></div>
<div class="btn1-parts primary fit"><a href="#"><i class="fa-solid fa-phone"></i> ボタン</a></div>
<div class="btn1-parts primary fit"><a href="#"><i class="fa-regular fa-envelope"></i> ボタン</a></div>
<div class="btn1-parts primary fit"><a href="#"><i class="fa-solid fa-comments"></i> ボタン</a></div>
<div class="btn1-parts primary fit"><a href="#"><i class="fa-solid fa-headset"></i> ボタン</a></div>
<div class="btn1-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-paper-plane"></i></a></div>
<div class="btn1-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-calendar-days"></i></a></div>
<div class="btn1-parts primary fit"><a href="#"><i class="fa-solid fa-user"></i> ボタン</a></div>
<div class="btn1-parts primary fit"><a href="#"><i class="fa-solid fa-pen-clip"></i> ボタン</a></div>
<div class="btn1-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-envelope-open"></i></a></div>
<div class="btn1-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-file-lines"></i></a></div>
<div class="btn1-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-cart-shopping"></i></a></div>
<div class="btn1-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-gift"></i></a></div>
<div class="btn1-parts primary fit"><a href="#"><i class="fa-solid fa-location-dot"></i> ボタン</a></div>
<div class="btn1-parts primary fit"><a href="#"><i class="fa-solid fa-crown"></i> ボタン</a></div>
</div>

</section>

html

/*ボタン（btn1）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn1-parts a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 5px;		/*角を少しだけ丸く*/
	padding: 0.5rem 2rem;	/*上下に0.2文字分、左右に2文字分の余白。*/
	background: var(--bg-inverse-color);	/*デフォルトの背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*デフォルトの文字色。theme.cssのbg-colorを読み込みます。*/
}

/*テキスト量にあったサイズ用*/
.btn1-parts.fit {
	width: fit-content;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn1-parts.fit.c {
	margin: 0 auto;
}

/*色違い（primary）*/
.btn1-parts.primary a {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*色違い（light）*/
.btn1-parts.light a {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*色違い（accent）*/
.btn1-parts.accent a {
	background: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);		/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*アイコン（Font Awesome）*/
.btn1-parts i {
	opacity: 0.6;
}

css

btn2

シンプルなグラデーションボタン。

<h2>btn2-parts</h2>

</section>

<h2>親のボックスに対して幅100%になるタイプ。</h2>

<p>▼ btn2-parts</p>
<div class="btn2-parts"><a href="#">ボタン</a></div>

<p>▼ btn2-parts primary</p>
<div class="btn2-parts primary"><a href="#">ボタン</a></div>

<p>▼ btn2-parts light</p>
<div class="btn2-parts light"><a href="#">ボタン</a></div>

<p>▼ btn2-parts accent</p>
<div class="btn2-parts accent"><a href="#">ボタン</a></div>

</section>

<h2>テキスト量にあったサイズになるタイプ。fitを追加する。</h2>

<p>▼ btn2-parts fit</p>
<div class="btn2-parts fit"><a href="#">ボタン</a></div>

<p>▼ btn2-parts primary fit</p>
<div class="btn2-parts primary fit"><a href="#">ボタン</a></div>

<p>▼ btn2-parts light fit</p>
<div class="btn2-parts light fit"><a href="#">ボタン</a></div>

<p>▼ btn2-parts accent fit</p>
<div class="btn2-parts accent fit"><a href="#">ボタン</a></div>

</section>

<h2>テキスト量にあったサイズになり、左右中央に配置されるタイプ。fit cを追加する。</h2>

<p class="c">▼ btn2-parts fit c</p>
<div class="btn2-parts fit c"><a href="#">ボタン</a></div>

<p class="c">▼ btn2-parts primary fit c</p>
<div class="btn2-parts primary fit c"><a href="#">ボタン</a></div>

<p class="c">▼ btn2-parts light fit c</p>
<div class="btn2-parts light fit c"><a href="#">ボタン</a></div>

<p class="c">▼ btn2-parts accent fit c</p>
<div class="btn2-parts accent fit c"><a href="#">ボタン</a></div>

</section>

<h2>Font Awesomeのアイコンとセットで使ってもOK</h2>
<p>他のアイコンを探したい場合は、<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>サイトをご覧下さい。</p>
<div style="display:flex;flex-wrap:wrap;gap:1rem;">
<div class="btn2-parts primary fit"><a href="#"><i class="fa-solid fa-circle-chevron-right"></i> ボタン</a></div>
<div class="btn2-parts primary fit"><a href="#"><i class="fa-solid fa-square-caret-right"></i> ボタン</a></div>
<div class="btn2-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-caret-right"></i></a></div>
<div class="btn2-parts primary fit"><a href="#"><i class="fa-solid fa-phone"></i> ボタン</a></div>
<div class="btn2-parts primary fit"><a href="#"><i class="fa-regular fa-envelope"></i> ボタン</a></div>
<div class="btn2-parts primary fit"><a href="#"><i class="fa-solid fa-comments"></i> ボタン</a></div>
<div class="btn2-parts primary fit"><a href="#"><i class="fa-solid fa-headset"></i> ボタン</a></div>
<div class="btn2-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-paper-plane"></i></a></div>
<div class="btn2-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-calendar-days"></i></a></div>
<div class="btn2-parts primary fit"><a href="#"><i class="fa-solid fa-user"></i> ボタン</a></div>
<div class="btn2-parts primary fit"><a href="#"><i class="fa-solid fa-pen-clip"></i> ボタン</a></div>
<div class="btn2-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-envelope-open"></i></a></div>
<div class="btn2-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-file-lines"></i></a></div>
<div class="btn2-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-cart-shopping"></i></a></div>
<div class="btn2-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-gift"></i></a></div>
<div class="btn2-parts primary fit"><a href="#"><i class="fa-solid fa-location-dot"></i> ボタン</a></div>
<div class="btn2-parts primary fit"><a href="#"><i class="fa-solid fa-crown"></i> ボタン</a></div>
</div>

</section>

html

/*ボタン（btn2）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn2-parts a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 5px;		/*角を少しだけ丸く*/
	padding: 0.5rem 2rem;	/*上下に0.2文字分、左右に2文字分の余白。*/
	color: var(--bg-color);	/*デフォルトの文字色。theme.cssのbg-colorを読み込みます。*/
	background-color: var(--bg-inverse-color); /*デフォルトの背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	background-image: linear-gradient(
		rgba(255,255,255,0.08) 0%,/*ボタンの上部にうっすら白っぽい色を重ねる*/
		rgba(0,0,0,0.14) 100%/*ボタンの下部にうっすら黒っぽい色を重ねる*/
	);
}

/*テキスト量にあったサイズ用*/
.btn2-parts.fit {
	width: fit-content;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn2-parts.fit.c {
	margin: 0 auto;
}

/*色違い（primary）*/
.btn2-parts.primary a {
	background-color: var(--primary-color);
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*色違い（light）*/
.btn2-parts.light a {
	background-color: var(--light-color);
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*色違い（accent）*/
.btn2-parts.accent a {
	background-color: var(--accent-color);
	color: var(--accent-inverse-color);		/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*アイコン（Font Awesome）*/
.btn2-parts i {
	opacity: 0.6;
}

css

btn3

光沢のあるボタン。

<h2>btn3-parts</h2>

</section>

<h2>親のボックスに対して幅100%になるタイプ。</h2>

<p>▼ btn3-parts</p>
<div class="btn3-parts"><a href="#">ボタン</a></div>

<p>▼ btn3-parts primary</p>
<div class="btn3-parts primary"><a href="#">ボタン</a></div>

<p>▼ btn3-parts light</p>
<div class="btn3-parts light"><a href="#">ボタン</a></div>

<p>▼ btn3-parts accent</p>
<div class="btn3-parts accent"><a href="#">ボタン</a></div>

</section>

<h2>テキスト量にあったサイズになるタイプ。fitを追加する。</h2>

<p>▼ btn3-parts fit</p>
<div class="btn3-parts fit"><a href="#">ボタン</a></div>

<p>▼ btn3-parts primary fit</p>
<div class="btn3-parts primary fit"><a href="#">ボタン</a></div>

<p>▼ btn3-parts light fit</p>
<div class="btn3-parts light fit"><a href="#">ボタン</a></div>

<p>▼ btn3-parts accent fit</p>
<div class="btn3-parts accent fit"><a href="#">ボタン</a></div>

</section>

<h2>テキスト量にあったサイズになり、左右中央に配置されるタイプ。fit cを追加する。</h2>

<p class="c">▼ btn3-parts fit c</p>
<div class="btn3-parts fit c"><a href="#">ボタン</a></div>

<p class="c">▼ btn3-parts primary fit c</p>
<div class="btn3-parts primary fit c"><a href="#">ボタン</a></div>

<p class="c">▼ btn3-parts light fit c</p>
<div class="btn3-parts light fit c"><a href="#">ボタン</a></div>

<p class="c">▼ btn3-parts accent fit c</p>
<div class="btn3-parts accent fit c"><a href="#">ボタン</a></div>

</section>

<h2>Font Awesomeのアイコンとセットで使ってもOK</h2>
<p>他のアイコンを探したい場合は、<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>サイトをご覧下さい。</p>
<div style="display:flex;flex-wrap:wrap;gap:1rem;">
<div class="btn3-parts primary fit"><a href="#"><i class="fa-solid fa-circle-chevron-right"></i> ボタン</a></div>
<div class="btn3-parts primary fit"><a href="#"><i class="fa-solid fa-square-caret-right"></i> ボタン</a></div>
<div class="btn3-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-caret-right"></i></a></div>
<div class="btn3-parts primary fit"><a href="#"><i class="fa-solid fa-phone"></i> ボタン</a></div>
<div class="btn3-parts primary fit"><a href="#"><i class="fa-regular fa-envelope"></i> ボタン</a></div>
<div class="btn3-parts primary fit"><a href="#"><i class="fa-solid fa-comments"></i> ボタン</a></div>
<div class="btn3-parts primary fit"><a href="#"><i class="fa-solid fa-headset"></i> ボタン</a></div>
<div class="btn3-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-paper-plane"></i></a></div>
<div class="btn3-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-calendar-days"></i></a></div>
<div class="btn3-parts primary fit"><a href="#"><i class="fa-solid fa-user"></i> ボタン</a></div>
<div class="btn3-parts primary fit"><a href="#"><i class="fa-solid fa-pen-clip"></i> ボタン</a></div>
<div class="btn3-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-envelope-open"></i></a></div>
<div class="btn3-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-file-lines"></i></a></div>
<div class="btn3-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-cart-shopping"></i></a></div>
<div class="btn3-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-gift"></i></a></div>
<div class="btn3-parts primary fit"><a href="#"><i class="fa-solid fa-location-dot"></i> ボタン</a></div>
<div class="btn3-parts primary fit"><a href="#"><i class="fa-solid fa-crown"></i> ボタン</a></div>
</div>

</section>

html

/*ボタン（btn3）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn3-parts a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 5px;		/*角を少しだけ丸く*/
	padding: 0.5rem 2rem;	/*上下に0.2文字分、左右に2文字分の余白。*/
	color: var(--bg-color);	/*デフォルトの文字色。theme.cssのbg-colorを読み込みます。*/
	background-color: var(--bg-inverse-color); /*デフォルトの背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	background-image: linear-gradient(
		rgba(255,255,255,0.08) 0%,/*ボタンの上部にうっすら白っぽい色を重ねる*/
		rgba(0,0,0,0.14) 100%/*ボタンの下部にうっすら黒っぽい色を重ねる*/
	);
	position: relative;
}

/*ボタンの上半分の光沢部分*/
.btn3-parts a::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: calc(100% - 8px);
	height: 40%;	/*光沢部分の高さ*/
	background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.1));/*背景グラデーション*/
}

/*テキスト量にあったサイズ用*/
.btn3-parts.fit {
	width: fit-content;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn3-parts.fit.c {
	margin: 0 auto;
}

/*色違い（primary）*/
.btn3-parts.primary a {
	background-color: var(--primary-color);
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*色違い（light）*/
.btn3-parts.light a {
	background-color: var(--light-color);
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*色違い（accent）*/
.btn3-parts.accent a {
	background-color: var(--accent-color);
	color: var(--accent-inverse-color);		/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*アイコン（Font Awesome）*/
.btn3-parts i {
	opacity: 0.6;
}

css

btn4

ふきだしつきのボタン。

<h2>btn4-parts</h2>

</section>

<h2>親のボックスに対して幅100%になるタイプ。</h2>

<p class="mb1rem">▼ btn4-parts</p>
<div class="btn4-parts"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">今だけ10%OFF</span></div>

<p class="mb3rem">▼ btn4-parts primary</p>
<div class="btn4-parts primary"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">今だけ10%OFF</span></div>

<p class="mb3rem">▼ btn4-parts light</p>
<div class="btn4-parts light"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">今だけ10%OFF</span></div>

<p class="mb3rem">▼ btn4-parts accent</p>
<div class="btn4-parts accent"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">今だけ10%OFF</span></div>

</section>

<h2>テキスト量にあったサイズになるタイプ。fitを追加する。</h2>
<p>※ふきだし内の文字数を少なくして下さい。多いと改行されて下のボタンテキストに重なってしまいます。</p>

<p class="mb3rem">▼ btn4-parts fit</p>
<div class="btn4-parts fit"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">10%OFF</span></div>

<p class="mb3rem">▼ btn4-parts primary fit</p>
<div class="btn4-parts primary fit"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">10%OFF</span></div>

<p class="mb3rem">▼ btn4-parts light fit</p>
<div class="btn4-parts light fit"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">10%OFF</span></div>

<p class="mb3rem">▼ btn4-parts accent fit</p>
<div class="btn4-parts accent fit"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">10%OFF</span></div>

</section>

<h2>テキスト量にあったサイズになり、左右中央に配置されるタイプ。fit cを追加する。</h2>
<p>※ふきだし内の文字数を少なくして下さい。多いと改行されて下のボタンテキストに重なってしまいます。</p>

<p class="c mb3rem">▼ btn4-parts fit c</p>
<div class="btn4-parts fit c"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">10%OFF</span></div>

<p class="c mb3rem">▼ btn4-parts primary fit c</p>
<div class="btn4-parts primary fit c"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">10%OFF</span></div>

<p class="c mb3rem">▼ btn4-parts light fit c</p>
<div class="btn4-parts light fit c"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">10%OFF</span></div>

<p class="c mb3rem">▼ btn4-parts accent fit c</p>
<div class="btn4-parts accent fit c"><a href="#">ご注文はこちらから</a><span class="fukidasi-parts">10%OFF</span></div>

</section>

<h2>Font Awesomeのアイコンとセットで使ってもOK</h2>
<p>他のアイコンを探したい場合は、<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>サイトをご覧下さい。</p>
<div style="display:flex;flex-wrap:wrap;gap:1rem;">
<div class="btn4-parts primary fit"><a href="#"><i class="fa-solid fa-circle-chevron-right"></i> ボタン</a></div>
<div class="btn4-parts primary fit"><a href="#"><i class="fa-solid fa-square-caret-right"></i> ボタン</a></div>
<div class="btn4-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-caret-right"></i></a></div>
<div class="btn4-parts primary fit"><a href="#"><i class="fa-solid fa-phone"></i> ボタン</a></div>
<div class="btn4-parts primary fit"><a href="#"><i class="fa-regular fa-envelope"></i> ボタン</a></div>
<div class="btn4-parts primary fit"><a href="#"><i class="fa-solid fa-comments"></i> ボタン</a></div>
<div class="btn4-parts primary fit"><a href="#"><i class="fa-solid fa-headset"></i> ボタン</a></div>
<div class="btn4-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-paper-plane"></i></a></div>
<div class="btn4-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-calendar-days"></i></a></div>
<div class="btn4-parts primary fit"><a href="#"><i class="fa-solid fa-user"></i> ボタン</a></div>
<div class="btn4-parts primary fit"><a href="#"><i class="fa-solid fa-pen-clip"></i> ボタン</a></div>
<div class="btn4-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-envelope-open"></i></a></div>
<div class="btn4-parts primary fit"><a href="#">ボタン <i class="fa-regular fa-file-lines"></i></a></div>
<div class="btn4-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-cart-shopping"></i></a></div>
<div class="btn4-parts primary fit"><a href="#">ボタン <i class="fa-solid fa-gift"></i></a></div>
<div class="btn4-parts primary fit"><a href="#"><i class="fa-solid fa-location-dot"></i> ボタン</a></div>
<div class="btn4-parts primary fit"><a href="#"><i class="fa-solid fa-crown"></i> ボタン</a></div>
</div>

</section>

html

/*ボタン（btn4）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn4-parts {
	position: relative;
}
.btn4-parts a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 100px;	/*角を丸く*/
	padding: 1.2rem 2rem;	/*上下に1.2文字分、左右に2文字分の余白。*/
	background: var(--bg-inverse-color);	/*デフォルトの背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*デフォルトの文字色。theme.cssのbg-colorを読み込みます。*/
}

/*テキスト量にあったサイズ用*/
.btn4-parts.fit {
	width: fit-content;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn4-parts.fit.c {
	margin: 0 auto;
}

/*色違い（primary）*/
.btn4-parts.primary a {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*色違い（light）*/
.btn4-parts.light a {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*色違い（accent）*/
.btn4-parts.accent a {
	background: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);		/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*ふきだし*/
.btn4-parts .fukidasi-parts {
	font-size: 0.8rem;
	background: #fff;	/*背景色*/
	border: 2px solid #000;	/*枠線の幅、線種、色。*/
	padding: 0.2rem 2rem;	/*ふきだし内の余白。上下、左右へ。*/
	border-radius: 100px;	/*角を丸くする指定。大きめであれば適当でOK。*/
	position: absolute;
	top: -1.5rem;	/*ふきだしの位置の設定*/
    left: 50%;
    transform: translateX(-50%);
	box-shadow: 0px 3px 10px rgba(0,0,0,0.2);	/*ふきだしの影。右へ、下へ、ぼかす量、0,0,0は黒色のことで0.2は色が20%出た状態*/
}

/*ふきだしの下の三角形の設定*/
.btn4-parts .fukidasi-parts::before {
    content: "";
    position: absolute;
    bottom: -8px;	/*配置場所*/
    left: 50%;
    transform: translateX(-50%) rotate(315deg);
    width: 10px;	/*三角形の幅*/
    height: 10px;	/*三角形の高さ*/
    background: #fff;	/*三角形の色*/
    border-left: 2px solid #000;	/*左の線の幅、線種、色。*/
    border-bottom: 2px solid #000;	/*下の線の幅、線種、色。*/
}

/*アイコン（Font Awesome）*/
.btn4-parts i {
	opacity: 0.6;
}

css

btn5

マウスオンで横から背景色がスライドで変化。

<h2>btn5-parts</h2>

</section>

<h2>親のボックスに対して幅100%になるタイプ。</h2>

<p class="mb1rem">▼ btn5-parts</p>
<div class="btn5-parts"><a href="#"><span>詳しく見る</span></a></div>

<p class="mb1rem">▼ btn5-parts</p>
<div class="btn5-parts primary"><a href="#"><span>詳しく見る</span></a></div>

<p class="mb1rem">▼ btn5-parts</p>
<div class="btn5-parts accent"><a href="#"><span>詳しく見る</span></a></div>

</section>

<h2>テキスト量にあったサイズになるタイプ。fitを追加する。</h2>

<p class="mb1rem">▼ btn5-parts fit</p>
<div class="btn5-parts fit"><a href="#"><span>詳しく見る</span></a></div>

<p class="mb1rem">▼ btn5-parts fit</p>
<div class="btn5-parts primary fit"><a href="#"><span>詳しく見る</span></a></div>

<p class="mb1rem">▼ btn5-parts fit</p>
<div class="btn5-parts accent fit"><a href="#"><span>詳しく見る</span></a></div>

</section>

<h2>テキスト量にあったサイズになり、左右中央に配置されるタイプ。fit cを追加する。</h2>

<p class="c mb1rem">▼ btn5-parts fit c</p>
<div class="btn5-parts fit c"><a href="#"><span>詳しく見る</span></a></div>

<p class="c mb1rem">▼ btn5-parts fit c</p>
<div class="btn5-parts primary fit c"><a href="#"><span>詳しく見る</span></a></div>

<p class="c mb1rem">▼ btn5-parts fit c</p>
<div class="btn5-parts accent fit c"><a href="#"><span>詳しく見る</span></a></div>

</section>

<h2>Font Awesomeのアイコンとセットで使ってもOK</h2>
<p>他のアイコンを探したい場合は、<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>サイトをご覧下さい。</p>
<div style="display:flex;flex-wrap:wrap;gap:1rem;">
<div class="btn5-parts primary fit"><a href="#"><span><i class="fa-solid fa-circle-chevron-right"></i> ボタン</span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span><i class="fa-solid fa-square-caret-right"></i> ボタン</span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span>ボタン <i class="fa-solid fa-caret-right"></i></span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span><i class="fa-solid fa-phone"></i> ボタン</span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span><i class="fa-regular fa-envelope"></i> ボタン</span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span><i class="fa-solid fa-comments"></i> ボタン</span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span><i class="fa-solid fa-headset"></i> ボタン</span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span>ボタン <i class="fa-regular fa-paper-plane"></i></span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span>ボタン <i class="fa-solid fa-calendar-days"></i></span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span><i class="fa-solid fa-user"></i> ボタン</span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span><i class="fa-solid fa-pen-clip"></i> ボタン</span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span>ボタン <i class="fa-regular fa-envelope-open"></i></span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span>ボタン <i class="fa-regular fa-file-lines"></i></span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span>ボタン <i class="fa-solid fa-cart-shopping"></i></span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span>ボタン <i class="fa-solid fa-gift"></i></span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span><i class="fa-solid fa-location-dot"></i> ボタン</span></a></div>
<div class="btn5-parts primary fit"><a href="#"><span><i class="fa-solid fa-crown"></i> ボタン</span></a></div>
</div>

</section>

html

/*ボタン（btn5）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn5-parts a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 100px;	/*角を丸く*/
	position: relative;
	overflow: hidden;
	/*display: inline-block;*/
	padding: 0.5rem 2rem;	/*上下に0.5文字分、左右に2文字分の余白*/
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}

.btn5-parts a span {
	position: relative;
	z-index: 1;
}

/*hover時に重なる背景*/
.btn5-parts a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bg-inverse-color);
	color: var(--bg-color);
	filter: brightness(1.5);	/*明るくする*/
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;	/*0.3sが速度。お好みで。*/
}
.btn5-parts a:hover::before {transform: scaleX(1);}
.btn5-parts a:hover {border-color: transparent;}

/*テキスト量にあったサイズ用*/
.btn5-parts.fit {
	width: fit-content;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn5-parts.fit.c {
	margin: 0 auto;
}

/*色違い（primary）*/
.btn5-parts.primary a {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}
.btn5-parts.primary a::before {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

/*色違い（accent）*/
.btn5-parts.accent a {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
.btn5-parts.accent a::before {
	background: var(--accent-color);
	color: var(--accent-inverse-color);
}

css

btn6

マウスオンで矢印下の円形が拡大して背景色に。

<h2>btn6-parts</h2>

</section>

<h2>テキスト量にあったサイズになるタイプ。fitを追加する。</h2>
<p class="mb1rem">▼ btn6-parts fit</p>
<div class="btn6-parts fit"><a href="#"><span>詳しく見る</span><i>→</i></a></div>
<p class="mb1rem">▼ テキストとして入力できるものは、入れ替えもOK。</p>
<div class="btn6-parts fit"><a href="#"><span>詳しく見る</span><i>●</i></a></div>

</section>

<h2>テキスト量にあったサイズになり、左右中央に配置されるタイプ。fit cを追加する。</h2>
<p class="c mb1rem">▼ btn6-parts fit c</p>
<div class="btn6-parts fit c"><a href="#"><span>詳しく見る</span><i>→</i></a></div>

</section>

<h2>予備：親のボックスに対して幅100%になるタイプ。</h2>
<p>幅があまりに広いとhover中に背景色が途中で切れます。調整はscale(50)の数値で、この場合は元の50倍。<br>
ただ、逆に幅が狭いところで使うと、50倍まで広がりすぎてタイムラグが出ます。<br>
画面幅いっぱいで使う事はほとんどないと思いますので、上記の２タイプのいずれかを使って下さい。または、ここのボタンの50の数値を下げてみて下さい。</p>
<p class="mb1rem">▼ btn6-parts</p>
<div class="btn6-parts"><a href="#"><span>詳しく見る</span><i>→</i></a></div>

</section>

</section>

html

/*ボタン（btn6）
---------------------------------------------------------------------------*/
/*ボタン全体*/
.btn6-parts a {
	--height: 60px;	/*ボタンの高さ。お好みで。*/
	--size: 40px;	/*円のサイズ。お好みで。*/
	--side-gap: calc((var(--height) - var(--size)) / 2);
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--height);
	border-radius: 999px;
	padding: 0 var(--side-gap) 0 2rem;	/*2remが、テキストの左側の余白です。2文字分。お好みで。*/
	background: var(--light-color);
	overflow: hidden;
	position: relative;
}

/*左側テキスト*/
.btn6-parts span:first-child {
	padding-right: 1rem;	/*テキストとアイコンがくっつかないよう間にとるスペース。お好みで。*/
}
.btn6-parts a:hover span:first-child {
	position: relative;z-index: 2;
	color: var(--primary-inverse-color);
}

/*右側アイコン*/
.btn6-parts i {
	font-style: normal;
	color: var(--primary-inverse-color);
	width: var(--size);
	line-height: var(--size);
	border-radius: 999px;
	text-align: center;
	position: relative;z-index: 1;
}

/*マウスオン時の右側アイコン*/
.btn6-parts a::before {
	content: "";
	position: absolute;
	right: var(--side-gap);
	top: 50%;
	transform: translateY(-50%) scale(1);
	width: var(--size);
	aspect-ratio: 1;
	text-align: center;
	border-radius: 999px;
	background: var(--primary-color);
	transition: transform 0.6s ease;	/*ゆっくり拡大する。0.6はお好みで。*/
}
.btn6-parts a:hover::before {transform: translateY(-50%) scale(50);}
.btn6-parts.fit a:hover::before {transform: translateY(-50%) scale(15);}

/*テキスト量にあったサイズ用*/
.btn6-parts.fit a {
	display: inline-flex;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn6-parts.fit.c {
	text-align: center;
}

css

ボタンパーツ

ボタンパーツ

ボタンパーツ一覧

絞り込み検索

btn-animation1

btn-side1

btn1

btn2

btn3

btn4

btn5

btn6

自分で作る
テンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

ボタンパーツ

ボタンパーツ

ボタンパーツ一覧

絞り込み検索

btn-animation1

btn-side1

btn1

btn2

btn3

btn4

btn5

btn6

自分で作るテンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

自分で作る
テンプレート