HTML & CSS

最終更新日：
公開日：

レシピ

CSSレシピ

ボタンのCSSレシピ

CSSを使ってボタンの背景やボーダー、アイコンに動きをつけるアニメーションのレシピを紹介します。

この記事のポイント

  • CSSのアニメーションでボタンリンクに動きをつける

目次

ボタンのCSSレシピ

CSSを使ったボタンの背景やボーダー、アイコンをアニメーションで動きを付けるレシピ集です。

以下の例ではindex.htmlがstyle.cssを読み込むことを想定します。
また、全てのボタンはclass属性でbtnを設定し、以下のCSSを共通で適用します。

style.css

// ボタンの共通スタイル
.btn {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	border-radius: 5px;
	border: 2px solid #222;
	color: #222;
	text-align: center;
	outline: none;
}

背景フェードイン

ボタンにマウスカーソルが乗ったときに背景色を変化させます。
背景色の変化に合わせて、ボタン内のテキストも併せて変化します。

ボタン1

index.html

// ボタン1
<a class="btn btn_type1" href="#">ボタン1</a>

style.css

.btn_type1 {
	padding: 10px 50px;
	transition: background-color ease 0.2s, color ease 0.2s;
}
.btn_type1:hover {
	color: #fff;
	background-color: #222;
}

背景を左右上下に流す（出現と同じ向きに戻る）

ボタンにマウスカーソルが乗ったときに、背景が左右上下から流れてくるアニメーションです。
カーソルがボタンから離れると、背景は出現と同じ向きへ流れます。

ボタン2：左から右、左に戻る

ボタン2

ボタン3：右から左、右に戻る

ボタン3

ボタン4：上から下、上に戻る

ボタン4

ボタン5：下から上、下に戻る

ボタン5

index.html

// ボタン2
<a class="btn btn_type2" href="#"><span>ボタン2</span></a>

// ボタン3
<a class="btn btn_type3" href="#"><span>ボタン3</span></a>

// ボタン4
<a class="btn btn_type4" href="#"><span>ボタン4</span></a>

// ボタン5
<a class="btn btn_type5" href="#"><span>ボタン5</span></a>

style.css

// ボタン2
.btn_type2 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type2::before {
	position: absolute;
	left: -100%;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #222;
	transition: left 0.2s ease;
}
.btn_type2:hover span {
	color: #fff;
}
.btn_type2:hover::before {
	left: 0;
}


// ボタン3
.btn_type3 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type3::before {
	position: absolute;
	top: 0;
	right: -100%;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #222;
	transition: right 0.2s ease;
}
.btn_type3:hover span {
	color: #fff;
}
.btn_type3:hover::before {
	right: 0;
}


// ボタン4
.btn_type4 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type4::before {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #222;
	transition: top 0.2s ease;
}
.btn_type4:hover span {
	color: #fff;
}
.btn_type4:hover::before {
	top: 0;
}


// ボタン5
.btn_type5 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type5::before {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #222;
	transition: top 0.2s ease;
}
.btn_type5:hover span {
	color: #fff;
}
.btn_type5:hover::before {
	top: 0;
}

背景を左右上下に流す（出現と反対の向きに流れる）

ボタンにマウスカーソルが乗ったときに、背景が左右上下から流れてくるアニメーションです。
カーソルがボタンから離れると、出現と反対の向きに流れます。

ボタン6：左から右、右に流れる

ボタン6

ボタン7：右から左、左に流れる

ボタン7

ボタン8：上から下、下に流れる

ボタン8

ボタン9：下から上、上に流れる

ボタン9

index.html

// ボタン6
<a class="btn btn_type6" href="#"><span>ボタン6</span></a>

// ボタン7
<a class="btn btn_type7" href="#"><span>ボタン7</span></a>

// ボタン8
<a class="btn btn_type8" href="#"><span>ボタン8</span></a>

// ボタン9
<a class="btn btn_type9" href="#"><span>ボタン9</span></a>

style.css

// ボタン6
.btn_type6 {

	span {
		position: relative;
		z-index: 2;
		display: block;
		padding: 10px 50px;
		color: #222;
		transition: color .2s ease;
	}

	&::before {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		transform: scale(0,1);
		transform-origin: right top;
		background-color: #222;
		transition: transform .2s ease;
	}

	&:hover {

		span {
			color: #fff;
		}

		&::before {
			transform: scale(1,1);
			transform-origin: left top;
		}
	}
}


// ボタン7
.btn_type7 {

	span {
		position: relative;
		z-index: 2;
		display: block;
		padding: 10px 50px;
		color: #222;
		transition: color .2s ease;
	}

	&::before {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		transform: scale(0,1);
		transform-origin: left top;
		background-color: #222;
		transition: transform .2s ease;
	}

	&:hover {

		span {
			color: #fff;
		}

		&::before {
			transform: scale(1,1);
			transform-origin: right top;
		}
	}
}


// ボタン8
.btn_type8 {

	span {
		position: relative;
		z-index: 2;
		display: block;
		padding: 10px 50px;
		color: #222;
		transition: color .2s ease;
	}

	&::before {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		transform: scale(1,0);
		transform-origin: left bottom;
		background-color: #222;
		transition: transform .2s ease;
	}

	&:hover {

		span {
			color: #fff;
		}

		&::before {
			transform: scale(1,1);
			transform-origin: left top;
		}
	}
}


// ボタン9
.btn_type9 {

	span {
		position: relative;
		z-index: 2;
		display: block;
		padding: 10px 50px;
		color: #222;
		transition: color .2s ease;
	}

	&::before {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		transform: scale(1,0);
		transform-origin: left top;
		background-color: #222;
		transition: transform .2s ease;
	}

	&:hover {

		span {
			color: #fff;
		}

		&::before {
			transform: scale(1,1);
			transform-origin: left bottom;
		}
	}
}

斜め向きの背景を左右上下に流す

ボタンにマウスカーソルが乗ったときに、背景が左右上下から流れてくるアニメーションです。
カーソルがボタンから離れると、出現と反対の向きに流れます。

ボタン10：左から右、右に流れる

ボタン10

ボタン11：右から左、左に流れる

ボタン11

ボタン12：上から下、下に流れる

ボタン12

ボタン13：下から上、上に流れる

ボタン13

index.html

// ボタン10
<a class="btn btn_type10" href="#"><span>ボタン10</span></a>

// ボタン11
<a class="btn btn_type11" href="#"><span>ボタン11</span></a>

// ボタン12
<a class="btn btn_type12" href="#"><span>ボタン12</span></a>

// ボタン13
<a class="btn btn_type13" href="#"><span>ボタン13</span></a>

style.css

// ボタン10
.btn_type10 span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 10px 50px;
  color: #222;
  transition: color 0.2s ease;
}
.btn_type10::before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  content: "";
  width: 120%;
  height: 100%;
  transform: skew(-25deg) scale(0, 1);
  transform-origin: right top;
  background-color: #222;
  transition: transform 0.2s ease;
}
.btn_type10:hover span {
  color: #fff;
}
.btn_type10:hover::before {
  transform: skew(-25deg) scale(1, 1);
  transform-origin: left top;
}


// ボタン11
.btn_type11 span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 10px 50px;
  color: #222;
  transition: color 0.2s ease;
}
.btn_type11::before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  content: "";
  width: 120%;
  height: 100%;
  transform: skew(-25deg) scale(0, 1);
  transform-origin: left top;
  background-color: #222;
  transition: transform 0.2s ease;
}
.btn_type11:hover span {
  color: #fff;
}
.btn_type11:hover::before {
  transform: skew(-25deg) scale(1, 1);
  transform-origin: right top;
}


// ボタン12
.btn_type12 span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 10px 50px;
  color: #222;
  transition: color 0.2s ease;
}
.btn_type12::before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  content: "";
  width: 100%;
  height: 250%;
  transform: skew(0, -15deg) scale(1, 0);
  transform-origin: left bottom;
  background-color: #222;
  transition: transform 0.2s ease;
}
.btn_type12:hover span {
  color: #fff;
}
.btn_type12:hover::before {
  transform: skew(0, -15deg) scale(1, 1);
  transform-origin: left top;
}


// ボタン13
.btn_type13 span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 10px 50px;
  color: #222;
  transition: color 0.2s ease;
}
.btn_type13::before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  content: "";
  width: 100%;
  height: 250%;
  transform: skew(0, -15deg) scale(1, 0);
  transform-origin: left top;
  background-color: #222;
  transition: transform 0.2s ease;
}
.btn_type13:hover span {
  color: #fff;
}
.btn_type13:hover::before {
  transform: skew(0, -15deg) scale(1, 1);
  transform-origin: left bottom;
}

背景が中央から広がる、中央に収束する

ボタンにマウスカーソルが乗ったときに、背景が中央から外側に向かって広がっていくアニメーションです。
カーソルがボタンから離れると、中央に向かって収束します。

ボタン14：中央から左右に広がり、中央に戻る

ボタン14

ボタン15：中央から上下に広がり、中央に戻る

ボタン15

ボタン16：中央から全体へ四角く広がり、中央に戻る

ボタン16

ボタン17：中央から全体へ丸く広がり、中央に戻る

ボタン17

index.html

// ボタン14
<a class="btn btn_type14" href="#"><span>ボタン14</span></a>

// ボタン15
<a class="btn btn_type15" href="#"><span>ボタン15</span></a>

// ボタン16
<a class="btn btn_type16" href="#"><span>ボタン16</span></a>

// ボタン17
<a class="btn btn_type17" href="#"><span>ボタン17</span></a>

style.css

// ボタン14
.btn_type14 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type14::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: top;
	background-color: #222;
	transition: transform 0.2s ease;
}
.btn_type14:hover span {
	color: #fff;
}
.btn_type14:hover::before {
	transform: scale(1, 1);
}


// ボタン15
.btn_type15 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type15::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(1, 0);
	background-color: #222;
	transition: transform 0.2s ease;
}
.btn_type15:hover span {
	color: #fff;
}
.btn_type15:hover::before {
	transform: scale(1, 1);
}


// ボタン16
.btn_type16 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type16::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(0, 0);
	background-color: #222;
	transition: transform 0.2s ease;
}
.btn_type16:hover span {
	color: #fff;
}
.btn_type16:hover::before {
	transform: scale(1, 1);
}


// ボタン17
.btn_type17 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type17::before {
	position: absolute;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
	z-index: 0;
	display: block;
	content: "";
	width: 50px;
	height: 50px;
	border-radius: 25px;
	transform: scale(0, 0);
	background-color: #222;
	transition: transform 0.2s ease;
}
.btn_type17:hover span {
	color: #fff;
}
.btn_type17:hover::before {
	transform: scale(4, 4);
}

背景が中央から広がる、外側に広がる

ボタンにマウスカーソルが乗ったときに、背景が中央から外側に向かって広がっていくアニメーションです。
カーソルがボタンから離れると、乗ったときと同様に外側に向かって広がります。

ボタン18：中央から左右に広がり、中央に戻る

ボタン18

ボタン19：中央から上下に広がり、中央に戻る

ボタン19

index.html

// ボタン18
<a class="btn btn_type18" href="#"><span>ボタン18</span></a>

// ボタン19
<a class="btn btn_type19" href="#"><span>ボタン19</span></a>

style.css

// ボタン18
.btn_type18 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type18::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left center;
	background-color: #222;
	transition: transform 0.2s ease;
}
.btn_type18::after {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: right center;
	background-color: #222;
	transition: transform 0.2s ease;
}
.btn_type18:hover span {
	color: #fff;
}
.btn_type18:hover::before {
	transform: scale(1, 1);
	transform-origin: center;
}
.btn_type18:hover::after {
	transform: scale(1, 1);
	transform-origin: center;
}


// ボタン19
.btn_type19 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type19::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(1, 0);
	transform-origin: top center;
	background-color: #222;
	transition: transform 0.2s ease;
}
.btn_type19::after {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(1, 0);
	transform-origin: bottom center;
	background-color: #222;
	transition: transform 0.2s ease;
}
.btn_type19:hover span {
	color: #fff;
}
.btn_type19:hover::before {
	transform: scale(1, 1);
	transform-origin: center;
}
.btn_type19:hover::after {
	transform: scale(1, 1);
	transform-origin: center;
}

背景が中央に収束する

ボタンにマウスカーソルが乗ったときに、背景が外側から中央に向かって収束するアニメーションです。
カーソルがボタンから離れると、乗ったときとは反対に外側に向かって広がります。

ボタン20：左右から中央に向かって収束し、左右に戻る

ボタン20

ボタン21：上下から中央に向かって収束し、上下に戻る

ボタン21

ボタン22：上下左右から中央に向かって収束し、上下左右に広がって戻る

ボタン22

ボタン23：円状で上下左右から中央に向かって収束し、上下左右に広がって戻る

ボタン23

index.html

// ボタン20
<a class="btn btn_type20" href="#"><span>ボタン20</span></a>

// ボタン21
<a class="btn btn_type21" href="#"><span>ボタン21</span></a>

// ボタン22
<a class="btn btn_type22" href="#"><span>ボタン22</span></a>

// ボタン23
<a class="btn btn_type23" href="#"><span>ボタン23</span></a>

style.css

// ボタン20
.btn_type20 {
	background-color: #222;
}
.btn_type20 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type20::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(1, 1);
	transform-origin: top;
	background-color: #fff;
	transition: transform 0.2s ease;
}
.btn_type20:hover span {
	color: #fff;
}
.btn_type20:hover::before {
	transform: scale(0, 1);
}


// ボタン21
.btn_type21 {
	background-color: #222;
}
.btn_type21 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type21::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(1, 1);
	background-color: #fff;
	transition: transform 0.2s ease;
}
.btn_type21:hover span {
	color: #fff;
}
.btn_type21:hover::before {
	transform: scale(1, 0);
}


// ボタン22
.btn_type22 {
	background-color: #222;
}
.btn_type22 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type22::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	transform: scale(1, 1);
	background-color: #fff;
	transition: transform 0.2s ease;
}
.btn_type22:hover span {
	color: #fff;
}
.btn_type22:hover::before {
	transform: scale(0, 0);
}


// ボタン23
.btn_type23 {
	background-color: #222;
}
.btn_type23 span {
	position: relative;
	z-index: 2;
	display: block;
	padding: 10px 50px;
	color: #222;
	transition: color 0.2s ease;
}
.btn_type23::before {
	position: absolute;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
	z-index: 0;
	display: block;
	content: "";
	width: 50px;
	height: 50px;
	border-radius: 25px;
	transform: scale(4, 4);
	background-color: #fff;
	transition: transform 0.2s ease;
}
.btn_type23:hover span {
	color: #fff;
}
.btn_type23:hover::before {
	transform: scale(0, 0);
}

ボタンの影が消える

ボタンにマウスカーソルが乗ったときに、ボタンの影が消えるアニメーションです。
カーソルがボタンから離れると影が現れて最初の状態に戻ります。

ボタンの影1：ボタンが下に移動しながら影がフワッと消えて押した感を演出

ボタンの影1

ボタンの影2：ボタンの影がフワッと消える

ボタンの影2

ボタンの影3：ボタンが下に移動しながら影が消えて押した感を演出

ボタンの影3

index.html

// ボタンの影1
<a class="btn btn_shadow_type1" href="#">ボタンの影1</a>

// ボタンの影2
<a class="btn btn_shadow_type2" href="#">ボタンの影2</a>

// ボタンの影3
<a class="btn btn_shadow_type3" href="#">ボタンの影3</a>

style.css

// ボタンの影1
.btn_shadow_type1 {
  padding: 10px 50px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn_shadow_type1:hover {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}


// ボタンの影2
.btn_shadow_type2 {
  padding: 10px 50px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}
.btn_shadow_type2:hover {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}


// ボタンの影3
.btn_shadow_type3 {
  padding: 10px 50px;
  box-shadow: 0 5px 0 rgb(0, 0, 0);
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn_shadow_type3:hover {
  transform: translateY(5px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}

ボタンの影が現れる

ボタンにマウスカーソルが乗ったときに、ボタンの下に影が現れてフワッと浮き出すようなアニメーションです。
カーソルがボタンから離れると影が薄くなっていき最初の状態に戻ります。

ボタンの影4：ボタンの下に影が現れてフワッと浮き出す

ボタンの影4

index.html

// ボタンの影4
<a class="btn btn_shadow_type4" href="#">ボタンの影4</a>

style.css

// ボタンの影4
.btn_shadow_type4 {
  padding: 10px 50px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
  transform: translateY(3px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn_shadow_type4:hover {
  transform: translateY(0);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}

ボーダー（枠線）の色が変わる

ボタンにマウスカーソルが乗ったとき、ボタンのボーダー（枠線）の色が変わるアニメーションです。
カーソルがボタンから離れると元の色に戻ります。

ボタンのボーダー1：ボーダー全体の色が変わる

ボタンのボーダー1

ボタンのボーダー2：ボーダーの上左、右下がそれぞれ別の色に変わる

ボタンのボーダー2

ボタンのボーダー3：ボーダーのグラデーションの色が変わる

ボタンのボーダー3

index.html

// ボタンのボーダー1
<a class="btn btn_border_type1" href="#">ボタンのボーダー1</a>

// ボタンのボーダー2
<a class="btn btn_border_type2" href="#">ボタンのボーダー2</a>

// ボタンのボーダー3
<a class="btn btn_border_type3" href="#">ボタンのボーダー3</a>

style.css

// ボタンのボーダー1
.btn_border_type1 {
  padding: 10px 50px;
  border: 2px solid #222;
  transition: border-color 0.3s ease;
}
.btn_border_type1:hover {
  border-color: #bbb;
}


// ボタンのボーダー2
.btn_border_type2 {
  padding: 10px 50px;
  border: 2px solid #222;
  transition: border-top-color 0.3s ease, border-left-color 0.3s ease, border-bottom-color 0.3s ease, border-right-color 0.3s ease;
}
.btn_border_type2:hover {
  border-top-color: #666;
  border-left-color: #666;
  border-bottom-color: #bbb;
  border-right-color: #bbb;
}


// ボタンのボーダー3
.btn_border_type3 {
  position: relative;
  overflow: visible;
  padding: 10px 50px;
  border: none;
  border-radius: 2px;
  background-color: #f7f7f7;
}
.btn_border_type3::before {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  display: block;
  content: "";
  border-radius: 4px;
  background-image: linear-gradient(to bottom right, rgb(34, 34, 34) 0%, rgb(153, 153, 153) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.btn_border_type3::after {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -2;
  display: block;
  content: "";
  border-radius: 4px;
  opacity: 0;
  background-image: linear-gradient(to bottom right, rgb(0, 33, 155) 0%, rgb(145, 163, 226) 100%);
  transition: opacity 0.3s ease;
}
.btn_border_type3:hover::before {
  opacity: 0;
}
.btn_border_type3:hover::after {
  opacity: 1;
}

.btn_border_type3 {
  position: relative;
  overflow: visible;
  padding: 10px 50px;
  border: none;
  border-radius: 2px;
  background-color: #f7f7f7;
}
.btn_border_type3::before {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  display: block;
  content: "";
  border-radius: 4px;
  background-image: linear-gradient(to bottom right, rgb(34, 34, 34) 0%, rgb(153, 153, 153) 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.btn_border_type3::after {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -2;
  display: block;
  content: "";
  border-radius: 4px;
  opacity: 0;
  background-image: linear-gradient(to bottom right, rgb(0, 33, 155) 0%, rgb(145, 163, 226) 100%);
  transition: opacity 0.3s ease;
}
.btn_border_type3:hover::before {
  opacity: 0;
}
.btn_border_type3:hover::after {
  opacity: 1;
}

ボーダー（枠線）の太さが変わる

ボタンにマウスカーソルが乗ったとき、ボタンのボーダー（枠線）の太さが変わるアニメーションです。
カーソルがボタンから離れると元の太さに戻ります。

ボタンのボーダー4：ボーダーが太くなる

ボタンのボーダー4

ボタンのボーダー5：ボーダーが細くなる

ボタンのボーダー5

index.html

// ボタンのボーダー4
<a class="btn btn_border_type4" href="#">ボタンのボーダー4</a>

// ボタンのボーダー5
<a class="btn btn_border_type5" href="#">ボタンのボーダー5</a>

style.css

// ボタンのボーダー4
.btn_border_type4 {
  padding: 10px 50px;
  border: none;
}
.btn_border_type4::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  display: block;
  content: "";
  border-radius: 4px;
  border: 1px solid #222;
  transition: border-width 0.2s linear;
}
.btn_border_type4:hover::before {
  border-width: 4px;
}


// ボタンのボーダー5
.btn_border_type5 {
  padding: 10px 50px;
  border: none;
}
.btn_border_type5::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  display: block;
  content: "";
  border-radius: 4px;
  border: 4px solid #222;
  transition: border-width 0.2s linear;
}
.btn_border_type5:hover::before {
  border-width: 1px;
}

ボーダー（枠線）が現れる

ボタンにマウスカーソルが乗ったとき、ボタンのボーダー（枠線）が現れるアニメーションです。
カーソルがボタンから離れるとボーダーは戻ります。

ボタンのボーダー6：左上、右下からボーダーが上下に現れる

ボタンのボーダー6

ボタンのボーダー7：左上、右下からボーダーが左右に現れる

ボタンのボーダー7

ボタンのボーダー8：左上、右下からボーダーが上下左右に現れる

ボタンのボーダー8

ボタンのボーダー9：右上、左下からボーダーが上下に現れる

ボタンのボーダー9

ボタンのボーダー10：ボーダーが時計回りに現れる

ボタンのボーダー10

ボタンのボーダー11：ボーダーが反時計回りに現れる

ボタンのボーダー11

index.html

// ボタンのボーダー6
<a class="btn btn_border_type6" href="#">ボタンのボーダー6</a>

// ボタンのボーダー7
<a class="btn btn_border_type6" href="#">ボタンのボーダー7</a>

// ボタンのボーダー8
<a class="btn btn_border_type8" href="#"><span>ボタンのボーダー8</span></a>

// ボタンのボーダー9
<a class="btn btn_border_type8" href="#"><span>ボタンのボーダー9</span></a>

// ボタンのボーダー10
<a class="btn btn_border_type8" href="#"><span>ボタンのボーダー10</span></a>

// ボタンのボーダー11
<a class="btn btn_border_type8" href="#"><span>ボタンのボーダー11</span></a>

style.css

// ボタンのボーダー6
.btn_border_type6 {
  padding: 10px 50px;
  border: none;
  border-radius: 0;
}
.btn_border_type6::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.btn_border_type6::after {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.btn_border_type6:hover::before {
  width: 100%;
}
.btn_border_type6:hover::after {
  width: 100%;
}


// ボタンのボーダー7
.btn_border_type7 {
  padding: 10px 50px;
  border: none;
  border-radius: 0;
}
.btn_border_type7::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.btn_border_type7::after {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.btn_border_type7:hover::before {
  height: 100%;
}
.btn_border_type7:hover::after {
  height: 100%;
}


// ボタンのボーダー8
.btn_border_type8 {
  border: none;
  border-radius: 0;
}
.btn_border_type8::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.btn_border_type8::after {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.btn_border_type8 span {
  position: relative;
  display: block;
  padding: 10px 50px;
}
.btn_border_type8 span::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.btn_border_type8 span::after {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.btn_border_type8:hover::before {
  width: 100%;
}
.btn_border_type8:hover::after {
  width: 100%;
}
.btn_border_type8:hover span::before {
  height: 100%;
}
.btn_border_type8:hover span::after {
  height: 100%;
}


// ボタンのボーダー9
.btn_border_type9 {
  border: none;
  border-radius: 0;
}
.btn_border_type9::before {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.btn_border_type9::after {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.btn_border_type9 span {
  position: relative;
  display: block;
  padding: 10px 50px;
}
.btn_border_type9 span::before {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.btn_border_type9 span::after {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.btn_border_type9:hover::before {
  width: 100%;
}
.btn_border_type9:hover::after {
  width: 100%;
}
.btn_border_type9:hover span::before {
  height: 100%;
}
.btn_border_type9:hover span::after {
  height: 100%;
}


// ボタンのボーダー10
.btn_border_type10 {
  border: none;
  border-radius: 0;
}
.btn_border_type10::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.btn_border_type10::after {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.btn_border_type10 span {
  position: relative;
  display: block;
  padding: 10px 50px;
}
.btn_border_type10 span::before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.btn_border_type10 span::after {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.btn_border_type10:hover::before {
  width: 100%;
}
.btn_border_type10:hover::after {
  width: 100%;
}
.btn_border_type10:hover span::before {
  height: 100%;
}
.btn_border_type10:hover span::after {
  height: 100%;
}


// ボタンのボーダー11
.btn_border_type11 {
  border: none;
  border-radius: 0;
}
.btn_border_type11::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.btn_border_type11::after {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.btn_border_type11 span {
  position: relative;
  display: block;
  padding: 10px 50px;
}
.btn_border_type11 span::before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.btn_border_type11 span::after {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.btn_border_type11:hover::before {
  height: 100%;
}
.btn_border_type11:hover::after {
  height: 100%;
}
.btn_border_type11:hover span::before {
  width: 100%;
}
.btn_border_type11:hover span::after {
  width: 100%;
}

アイコン画像を動かす

ボタンにマウスカーソルが乗ったとき、ボタンのアイコン画像に動きをつけるアニメーションです。
カーソルがボタンから離れるとアイコン画像は元の位置に戻ります。

ボタンのアイコン画像1：アイコン画像が右側に移動する

ボタンのアイコン画像1

ボタンのアイコン画像2：アイコン画像が左側に移動する

ボタンのアイコン画像2

ボタンのアイコン画像3：アイコン画像が横軸で回転する

ボタンのアイコン画像3

ボタンのアイコン画像4：アイコン画像が縦軸で回転する

ボタンのアイコン画像4

ボタンのアイコン画像5：アイコン画像が時計回りで半回転する

ボタンのアイコン画像5

ボタンのアイコン画像6：ボタンの背景色と同時にアイコン画像の色が変わる

ボタンのアイコン画像6

index.html

// ボタンのアイコン画像1
<a class="btn btn_icon_type1" href="#">ボタンのアイコン画像1</a>

// ボタンのアイコン画像2
<a class="btn btn_icon_type2" href="#">ボタンのアイコン画像2</a>

// ボタンのアイコン画像3
<a class="btn btn_icon_type3" href="#">ボタンのアイコン画像3</a>

// ボタンのアイコン画像4
<a class="btn btn_icon_type4" href="#">ボタンのアイコン画像4</a>

// ボタンのアイコン画像5
<a class="btn btn_icon_type5" href="#">ボタンのアイコン画像5</a>

// ボタンのアイコン画像6
<a class="btn btn_icon_type6" href="#">ボタンのアイコン画像6</a>

style.css

// ボタンのアイコン画像1
.btn_icon_type1 {
	padding: 10px 50px;
	background: url(../images/icon_arrow_right2.svg) right 10px center / 10px auto no-repeat;
	transition: background-position .3s ease;

	&:hover {
		background-position: right 5px center;
	}
}


// ボタンのアイコン画像2
.btn_icon_type2 {
	padding: 10px 50px;
	background: url(../images/icon_arrow_right2.svg) right 10px center / 10px auto no-repeat;
	transition: background-position .3s ease;

	&:hover {
		background-position: right 15px center;
	}
}


// ボタンのアイコン画像3
.btn_icon_type3 {
	position: relative;
	padding: 10px 50px;

	&::after {
		position: absolute;
		top: calc(50% - 8px);
		right: 10px;
		display: block;
		content: "";
		width: 10px;
		height: 17px;
		transform: rotate3d( 1, 0, 0, 0deg);
		background: url(../images/icon_arrow_right2.svg) top left / 10px auto no-repeat;
	}

	&:hover {
		&::after {
			animation: rotateIcon .5s ease 1;
		}
	}
}

@keyframes rotateIcon {

	0% {
		transform: rotate3d( 1, 0, 0, 0deg);
	}

	50% {
		transform: rotate3d( 1, 0, 0, 180deg);
	}

	100% {
		transform: rotate3d( 1, 0, 0, 360deg);
	}
	
}


// ボタンのアイコン画像4
.btn_icon_type4 {
	position: relative;
	padding: 10px 50px;

	&::after {
		position: absolute;
		top: calc(50% - 8px);
		right: 10px;
		display: block;
		content: "";
		width: 10px;
		height: 17px;
		transform: rotate3d( 0, 1, 0, 0deg);
		background: url(../images/icon_arrow_right2.svg) top left / 10px auto no-repeat;
		transition: transform .5s ease;
	}

	&:hover {
		&::after {
			transform: rotate3d( 0, 1, 0, 180deg);
		}
	}
}


// ボタンのアイコン画像5
.btn_icon_type5 {
	position: relative;
	padding: 10px 50px;

	&::after {
		position: absolute;
		top: calc(50% - 8px);
		right: 10px;
		display: block;
		content: "";
		width: 10px;
		height: 17px;
		transform: rotate3d( 0, 0, 1, 0deg);
		background: url(../images/icon_arrow_right2.svg) top left / 10px auto no-repeat;
		transition: transform .5s ease;
	}

	&:hover {
		&::after {
			transform: rotate3d( 0, 0, 1, 180deg);
		}
	}
}


// ボタンのアイコン画像6
.btn_icon_type6 {
	padding: 10px 50px;
	background: url(../images/icon_arrow_right2.svg) right 10px center / 10px auto no-repeat;
	transition: background .3s ease, color .3s ease;

	&:hover {
		color: #f7f7f7;
		background: #222 url(../images/icon_arrow_right_white2.svg) right 10px center / 10px auto no-repeat;
	}
}

ボタンが回転する

ボタンにマウスカーソルが乗ったとき、ボタンがクルッと回転するアニメーションです。
カーソルがボタンから離れると反対回りに回転します。

ボタンの回転1：アイコン画像が右側に移動する

ボタン1ボタン1

ボタンの回転2：アイコン画像が左側に移動する

ボタン2ボタン2

ボタンの回転3：アイコン画像が横軸で回転する

ボタン3ボタン3

ボタンの回転4：アイコン画像が縦軸で回転する

ボタン4ボタン4

index.html

// ボタンの回転1
<a class="btn_rotate_type1" href="#"><span>ボタン1</span><span>ボタン1</span></a>

// ボタンの回転2
<a class="btn_rotate_type2" href="#"><span>ボタン2</span><span>ボタン2</span></a>

// ボタンの回転3
<a class="btn_rotate_type3" href="#"><span>ボタン3</span><span>ボタン3</span></a>

// ボタンの回転4
<a class="btn_rotate_type4" href="#"><span>ボタン4</span><span>ボタン4</span></a>

style.css

// ボタンの回転1
.btn_rotate_type1 {
	position: relative;
	display: inline-block;
	margin-bottom: 30px;
}
.btn_rotate_type1 span {
	display: inline-block;
	padding: 10px 50px;
	border-radius: 5px;
	border: 2px solid #222;
	color: #222;
	text-align: center;
	outline: none;
}
.btn_rotate_type1 span:nth-child(1) {
	background: #f7f7f7;
	transform: rotate3d(1, 0, 0, 0deg);
	transform-origin: 0 50% 18px;
	transition: transform 0.3s ease;
}
.btn_rotate_type1 span:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	color: #f7f7f7;
	background: #222;
	transform: rotate3d(1, 0, 0, -90deg);
	transform-origin: 0 50% 18px;
	transition: transform 0.3s ease;
}
.btn_rotate_type1:hover span:nth-child(1) {
	transform: rotate3d(1, 0, 0, 90deg);
}
.btn_rotate_type1:hover span:nth-child(2) {
	transform: rotate3d(1, 0, 0, 0deg);
}


// ボタンの回転2
.btn_rotate_type2 {
	position: relative;
	display: inline-block;
	margin-bottom: 30px;
}
.btn_rotate_type2 span {
	display: inline-block;
	padding: 10px 50px;
	border-radius: 5px;
	border: 2px solid #222;
	color: #222;
	text-align: center;
	outline: none;
}
.btn_rotate_type2 span:nth-child(1) {
	background: #f7f7f7;
	transform: rotate3d(1, 0, 0, 0deg);
	transform-origin: 0 50% 18px;
	transition: transform 0.3s ease;
}
.btn_rotate_type2 span:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	color: #f7f7f7;
	background: #222;
	transform: rotate3d(1, 0, 0, 90deg);
	transform-origin: 0 50% 18px;
	transition: transform 0.3s ease;
}
.btn_rotate_type2:hover span:nth-child(1) {
	transform: rotate3d(1, 0, 0, -90deg);
}
.btn_rotate_type2:hover span:nth-child(2) {
	transform: rotate3d(1, 0, 0, 0deg);
}


// ボタンの回転3
.btn_rotate_type3 {
	position: relative;
	display: inline-block;
	margin-bottom: 30px;
}
.btn_rotate_type3 span {
	display: inline-block;
	padding: 10px 50px;
	border-radius: 5px;
	border: 2px solid #222;
	color: #222;
	text-align: center;
	outline: none;
}
.btn_rotate_type3 span:nth-child(1) {
	background: #f7f7f7;
	transform: rotate3d(0, 1, 0, 0deg);
	transform-origin: 50% 0 75px;
	transition: transform 0.3s ease;
}
.btn_rotate_type3 span:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	color: #f7f7f7;
	background: #222;
	transform: rotate3d(0, 1, 0, 90deg);
	transform-origin: 50% 0 75px;
	transition: transform 0.3s ease;
}
.btn_rotate_type3:hover span:nth-child(1) {
	transform: rotate3d(0, 1, 0, -90deg);
}
.btn_rotate_type3:hover span:nth-child(2) {
	transform: rotate3d(0, 1, 0, 0deg);
}


// ボタンの回転4
.btn_rotate_type4 {
	position: relative;
	display: inline-block;
	margin-bottom: 30px;
}
.btn_rotate_type4 span {
	display: inline-block;
	padding: 10px 50px;
	border-radius: 5px;
	border: 2px solid #222;
	color: #222;
	text-align: center;
	outline: none;
}
.btn_rotate_type4 span:nth-child(1) {
	background: #f7f7f7;
	transform: rotate3d(0, 1, 0, 0deg);
	transform-origin: 50% 0 75px;
	transition: transform 0.3s ease;
}
.btn_rotate_type4 span:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	color: #f7f7f7;
	background: #222;
	transform: rotate3d(0, 1, 0, -90deg);
	transform-origin: 50% 0 75px;
	transition: transform 0.3s ease;
}
.btn_rotate_type4:hover span:nth-child(1) {
	transform: rotate3d(0, 1, 0, 90deg);
}
.btn_rotate_type4:hover span:nth-child(2) {
	transform: rotate3d(0, 1, 0, 0deg);
}

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

関連記事

前のページへ 一覧に戻る 次のページへ