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

ボタンパーツ

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;		/*枠線をアニメーションさせる為に必要な指定*/
	display: inline-block;
	box-shadow: 0px 0px 0px 1px #ccc inset;	/*デフォルトで見えている枠線の設定*/
}

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

/*枠線共通*/
.btn-animation1-parts::before,
.btn-animation1-parts::after,
.btn-animation1-inner-parts::before,
.btn-animation1-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;	/*アニメーションの速度のタイプ。同じ速度にする。*/
}

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

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

css

btn5

ふきだしつきのボタン。

html

/*btn5
---------------------------------------------------------------------------*/
.btn5-container-parts {position: relative;}
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;	/*角を少しだけ丸くする*/
}

/*マウスオン時に少しだけ大きく*/
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;
}

/*ふきだしを使う場合に上に食い込んでしまうので、それを回避するためのスタイル*/
.btn5-container-parts.mt-parts {
	margin-top: 40px;
}

css

btn4

光沢のあるボタン

html

css

btn3

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

html

css

btn2

シンプルなボタン

html

css

btn1

シンプルなボタン

html

css

btn-side1

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

html

css

ボタンパーツ

btn-animation1

btn5

btn4

btn3

btn2

btn1

btn-side1

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

ボタンパーツ

btn-animation1

btn5

btn4

btn3

btn2

btn1

btn-side1

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート