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

ボタンパーツ

btn-btn1

ボタン類。

<div class="c">

<a href="#" class="animation-btn-inner-parts">もっとみる</a>

</div>

<a href="#" class="btn5-parts">ご注文はこちらから</a>今だけ10%OFF
 
<a href="#" class="btn5-parts border-radius-parts">ご注文はこちらから</a>今だけ10%OFF
 
<a href="#" class="btn5-parts block">ご注文はこちらから</a>今だけ10%OFF
 
<a href="#" class="btn5-parts block border-radius-parts">ご注文はこちらから</a>今だけ10%OFF

</section>

html

/*btnの設定（「btn1-parts」と「btn2-parts」と部分的に他のもある）
---------------------------------------------------------------------------*/
/*ボタン共通*/
a.btn1-parts, a.btn2-parts {
	display: inline-block;text-decoration: none;
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0.3rem 2rem;	/*上下、左右へのボタン内の余白*/
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%出た状態。*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*iタグ共通（アイコンの事）*/
a.btn1-parts i, a.btn2-parts i, a.btn3-parts i, a.btn4-parts i {
	padding-left: 1em;	/*アイコンとテキストの間の余白*/
}

/*btn1-partsの追加指定*/
a.btn1-parts {
	background: #fff;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

/*btn1-parts内のiタグ（アイコンの事）*/
a.btn1-parts i {
	color: #999;	/*アイコンの色*/
}

/*btn2-partsの追加指定*/
a.btn2-parts {
	background: #999;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*マウスオン時*/
a:hover.btn1-parts, a:hover.btn2-parts {
	transform: scale(1.03);		/*103%に拡大する*/
	filter: brightness(1.1);	/*少しだけ明るくする*/
}

/*btn3-parts
---------------------------------------------------------------------------*/
a.btn3-parts {
	text-decoration: none;display: inline-block;
	background: linear-gradient(#ff9727, #ff7827);/*背景グラデーション*/
	color: #fff;	/*文字色*/
	padding: 1rem 2rem;	/*ボタン内の余白。上下、左右へ。*/
	font-size: 1.3rem;	/*文字サイズを130%*/
	border-radius: 5px;	/*角を少しだけ丸くする*/
	box-shadow: 3px 3px 8px rgba(194,79,10,0.3);	/*ボタンの影。右へ、下へ、ぼかす量、194,79,10は暗いオレンジ系のrgb値で0.3は色が30%出た状態*/
}

/*マウスオン時に少しずらす*/
a.btn3-parts:hover,a.btn4-parts:hover {
	box-shadow: none;	/*ボックスの影を消す*/
	position: relative;
	left: 1px;
	top: 1px;
}

/*btn4-parts
---------------------------------------------------------------------------*/
a.btn4-parts {
	text-decoration: none;display: inline-block;
	background: linear-gradient(#ff2f74, #ec0652);/*背景グラデーション*/
	color: #fff;		/*文字色*/
	padding: 1rem 2rem;	/*ボタン内の余白。上下、左右へ。*/
	font-size: 1.3rem;	/*文字サイズを130%*/
	border-radius: 5px;	/*角を少しだけ丸くする*/
	box-shadow: 3px 3px 8px rgba(192,5,66,0.3);	/*ボタンの影。右へ、下へ、ぼかす量、192,5,66はグリーン系のrgb値で0.3は色が30%出た状態*/
	position: relative;
}

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

/*btn5-parts
---------------------------------------------------------------------------*/
a.btn5-parts {
	text-decoration: none;display: inline-block;
	background: linear-gradient(#66c005, #4f9604);/*背景グラデーション*/
	color: #fff;		/*文字色*/
	padding: 1rem 3rem;	/*ボタン内の余白。上下、左右へ。*/
	font-size: 1.3rem;	/*文字サイズを130%*/
	border-radius: 5px;	/*角を少しだけ丸くする*/
}
.btn5-container-parts {
	position: relative;
}

/*マウスオン時に少しだけ大きく*/
a.btn5-parts:hover {
	transform: scale(1.02);
}

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

/*ふきだしの下の三角形の設定*/
.btn5-container-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 #4f9604;		/*枠線の幅、線種、色*/
    border-bottom: 2px solid #4f9604;	/*枠線の幅、線種、色*/
}

.btn5-parts.border-radius-parts {
	border-radius: 100px;
}

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

/*ボタンの一番の外側のボックス*/
.animation-btn-parts {
	position: relative;		/*枠線をアニメーションさせる為に必要な指定*/
	display: inline-block;
	box-shadow: 0px 0px 0px 1px #ccc inset;	/*デフォルトで見えている枠線の設定*/
}

/*上のanimation-btnの内側にあるボックス*/
.animation-btn-inner-parts {
	display: block;text-decoration: none;
	padding: 0.5em 3em;		/*ボタン内の余白。上下、左右へ。emは文字の単位。1emが1文字分という事です。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	text-indent: 0.1em;		/*letter-spacingを設定するとその分全体のテキスト位置がずれるので、戻す設定。同じ数字にしておけばOKです。*/
}

/*ボタン内でiタグを使う場合の設定*/
.animation-btn-inner-parts i {
	display: inline-block;
	transition: 0.3s;		/*アニメーションにかける時間。0.3秒。*/
	padding-left: 1em;		/*テキストと、iタグの間の余白*/
}
.animation-btn-inner-parts:hover i {
	transform: translateX(5px);	/*マウスオン時にiタグを5pxだけ右に移動する*/
}

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

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

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

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

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

css

btn-btn-side

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

html

css

ボタンパーツ

btn-btn1

btn-btn-side

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

ボタンパーツ

btn-btn1

btn-btn-side

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート