コピペですぐ使える！ビジネスライクなCSSボタンデザイン30選

2022.10.02
Webサイト制作ブログ集客

今回はコピペで作れるCSSボタンデザインをご紹介していきます。

私が現場において使用頻度の高いものを中心に掲載しています。
後半では遊び心のあるボタンデザインも掲載していますので、シーンに合わせて使い分けて頂ければと思います。

ホバーアクション（マウスを重ねた時の変化）も合わせて入れてますので、すぐにご使用頂けます。

※テーマや既存のCSSによっては見え方が多少異なる場合がありますのでその都度調整をお願いします。

シンプルなボタンデザイン
立体的なボタンデザイン
グラデーションのボタンデザイン
矢印やアイコンの付いたボタンデザイン
カジュアルなボタンデザイン
動くボタンデザイン
ホバーアクションが個性的なボタンデザイン
まとめ
無料相談の流れ
無料相談　ご利用後の流れ

シンプルなボタンデザイン

Button

最もベーシックな長方形タイプの白抜きバージョン。マウスオンでカラーが反転します。

コードを表示

HTML

<a href="" class="btn_01">Button</a>

1	<a href="" class="btn_01">Button</a>

CSS

a.btn_01 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	color: #27acd9;
	transition: 0.5s;
}
a.btn_01:hover {
	color: #fff;
	background: #27acd9;
}

a.btn_01 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border: 2px solid #27acd9;

color: #27acd9;

transition: 0.5s;

}

a.btn_01:hover {

color: #fff;

background: #27acd9;

}

Button

最もベーシックな長方形タイプのベタ塗りバージョン。マウスオンでカラーが反転します。

コードを表示

HTML

<a href="" class="btn_02">Button</a>

1	<a href="" class="btn_02">Button</a>

CSS

a.btn_02 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	transition: 0.5s;
}
a.btn_02:hover {
	color: #27acd9;
	background: #fff;
}

a.btn_02 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border: 2px solid #27acd9;

background: #27acd9;

color: #fff;

transition: 0.5s;

}

a.btn_02:hover {

color: #27acd9;

background: #fff;

}

Button

角丸タイプの白抜きバージョン。マウスオンでカラーが反転します。

コードを表示

HTML

<a href="" class="btn_03">Button</a>

1	<a href="" class="btn_03">Button</a>

CSS

a.btn_03 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	color: #27acd9;
	border-radius: 100vh;
	transition: 0.5s;
}
a.btn_03:hover {
	color: #fff;
	background: #27acd9;
}

a.btn_03 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border: 2px solid #27acd9;

color: #27acd9;

border-radius: 100vh;

transition: 0.5s;

}

a.btn_03:hover {

color: #fff;

background: #27acd9;

}

Button

角丸タイプのベタ塗りバージョン。マウスオンでカラーが反転します。

コードを表示

HTML

<a href="" class="btn_04">Button</a>

1	<a href="" class="btn_04">Button</a>

CSS

a.btn_04 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}
a.btn_04:hover {
	color: #27acd9;
	background: #fff;
}

a.btn_04 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border: 2px solid #27acd9;

background: #27acd9;

color: #fff;

border-radius: 100vh;

transition: 0.5s;

}

a.btn_04:hover {

color: #27acd9;

background: #fff;

}

立体的なボタンデザイン

Button

暗い色の下線を付けるだけで立体的なボタンに。マウスオンで実際にボタンを押したようなアクションに。

コードを表示

HTML

<a href="" class="btn_05">Button</a>

1	<a href="" class="btn_05">Button</a>

CSS

a.btn_05 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	border-bottom: 7px solid #0686b2;
	background: #27acd9;
	color: #fff;
}
a.btn_05:hover {
	margin-top: 6px;
	border-bottom: 1px solid #0686b2;
	color: #fff;
}

a.btn_05 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border-radius: 0.3rem;

border-bottom: 7px solid #0686b2;

background: #27acd9;

color: #fff;

}

a.btn_05:hover {

margin-top: 6px;

border-bottom: 1px solid #0686b2;

color: #fff;

}

Button

角丸タイプの立体的なボタン。マウスオンで実際にボタンを押したようなアクションに。

コードを表示

HTML

<a href="" class="btn_06">Button</a>

1	<a href="" class="btn_06">Button</a>

CSS

a.btn_06 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 100vh;
	border-bottom: 7px solid #0686b2;
	background: #27acd9;
	color: #fff;
}
a.btn_06:hover {
	margin-top: 6px;
	border-bottom: 1px solid #0686b2;
	color: #fff;
}

a.btn_06 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border-radius: 100vh;

border-bottom: 7px solid #0686b2;

background: #27acd9;

color: #fff;

}

a.btn_06:hover {

margin-top: 6px;

border-bottom: 1px solid #0686b2;

color: #fff;

}

Button

シャドウを付けて浮いたように見せた角丸ボタン。マウスオンでカラーが反転します。

コードを表示

HTML

<a href="" class="btn_07">Button</a>

1	<a href="" class="btn_07">Button</a>

CSS

a.btn_07 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	color: #27acd9;
	border-bottom: 2px solid #27acd9;
	border-radius: 100vh;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	transition: 0.5s;
}
a.btn_07:hover {
	color: #fff;
	background: #27acd9;
	border-bottom: 2px solid #fff;
	transform: translateY(3px);
}

a.btn_07 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

color: #27acd9;

border-bottom: 2px solid #27acd9;

border-radius: 100vh;

box-shadow: 0 2px 7px rgba(0, 0, 0, .3);

-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);

transition: 0.5s;

}

a.btn_07:hover {

color: #fff;

background: #27acd9;

border-bottom: 2px solid #fff;

transform: translateY(3px);

}

Button

浮き出し効果で立体的なボタンデザインに。マウスオンで明るく変化します。

コードを表示

HTML

<a href="" class="btn_08">Button</a>

1	<a href="" class="btn_08">Button</a>

CSS

a.btn_08 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background: #27acd9;
	border: 6px outset #1699c5;
	color: #fff;
	transition: 0.5s;
}
a.btn_08:hover {
	background: #44c6f2;
	border: 6px outset #27acd9;
	color: #fff;
}

a.btn_08 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

background: #27acd9;

border: 6px outset #1699c5;

color: #fff;

transition: 0.5s;

}

a.btn_08:hover {

background: #44c6f2;

border: 6px outset #27acd9;

color: #fff;

}

グラデーションのボタンデザイン

Button

濃淡のグラデーション+シャドウで高級感を出したボタンデザインに。マウスオンで透過します。

コードを表示

HTML

<a href="" class="btn_09">Button</a>

1	<a href="" class="btn_09">Button</a>

CSS

a.btn_09 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background: linear-gradient(to top, rgb(5, 130, 174), #27acd9);
	color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
}
a.btn_09:hover {
	color: #fff;
	opacity: 0.5;
}

a.btn_09 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

background: linear-gradient(to top, rgb(5, 130, 174), #27acd9);

color: #fff;

box-shadow: 0 2px 5px rgba(0, 0, 0, .2);

-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);

transition: 0.5s;

}

a.btn_09:hover {

color: #fff;

opacity: 0.5;

}

Button

違う2色のグラデーション+シャドウでお洒落なボタンデザインに。マウスオンでグラデが左右反転します。

コードを表示

HTML

<a href="" class="btn_10">Button</a>

1	<a href="" class="btn_10">Button</a>

CSS

a.btn_10 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background-image: linear-gradient(to right, #27acd9 0%, #b4e12b 100%);
	border-radius: 100vh;
	color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
}
a.btn_10:hover {
	color: #fff;
	background-image: linear-gradient(to left, #27acd9 0%, #b4e12b 100%);
}

a.btn_10 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border-radius: 100vh;

color: #fff;

border: 2px solid #fff;

box-shadow: 0 2px 5px rgba(0, 0, 0, .2);

-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);

transition: 0.5s;

}

a.btn_10:hover {

color: #fff;

}

Button

モノトーンのグラデーション+シャドウによるリアルなボタンデザイン。マウスオンで透過します。

コードを表示

HTML

<a href="" class="btn_11">Button</a>

1	<a href="" class="btn_11">Button</a>

CSS

a.btn_11 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
	border-radius: 100vh;
	color: #333;
	border: 1px solid #999;
	text-shadow: 0 1px #fff;
	box-shadow: 0 3px 2px 1px #fcfcfc, 0 4px 6px #cecfd1, 0 -2px 2px #cecfd1, 0 -4px 2px #eee, inset 0 0 2px 2px #cecfd1;
	transition: 0.5s;
}
a.btn_11:hover {
	opacity: 0.5;
}

a.btn_11 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border-radius: 100vh;

color: #333;

border: 1px solid #999;

text-shadow: 0 1px #fff;

box-shadow: 0 3px 2px 1px #fcfcfc, 0 4px 6px #cecfd1, 0 -2px 2px #cecfd1, 0 -4px 2px #eee, inset 0 0 2px 2px #cecfd1;

transition: 0.5s;

}

a.btn_11:hover {

opacity: 0.5;

}

矢印やアイコンの付いたボタンデザイン

Button

左側に矢印の付いたボタンデザイン。マウスオンで少し明るい色に変化します。

コードを表示

HTML

<a href="" class="btn_12">Button</a>

1	<a href="" class="btn_12">Button</a>

CSS

a.btn_12 {
	display: flex;
    justify-content: space-evenly;
    align-items: center;
	text-align: center;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem 1rem 3rem;
	font-weight: bold;
	background: #27acd9;
	color: #fff;
	border-radius: 100vh;
	position: relative;
	transition: 0.5s;
}
a.btn_12::before {
	content: '';
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}
a.btn_12:hover {
	background: #44c6f2;
	color: #fff;
}

a.btn_12 {

display: flex;

justify-content: space-evenly;

align-items: center;

text-align: center;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem 1rem 3rem;

font-weight: bold;

background: #27acd9;

color: #fff;

border-radius: 100vh;

position: relative;

transition: 0.5s;

}

a.btn_12::before {

content: '';

width: 7px;

height: 7px;

border-top: 2px solid #fff;

border-right: 2px solid #fff;

transform: rotate(45deg);

}

a.btn_12:hover {

background: #44c6f2;

color: #fff;

}

Button

右側にスタイリッシュな矢印の付いたボタンデザイン。マウスオンで背景が色付きます。

コードを表示

HTML

<a href="" class="btn_13">Button</a>

1	<a href="" class="btn_13">Button</a>

CSS

a.btn_13 {
	display: flex;
    justify-content: space-between;
    align-items: center;
	text-align: center;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background: #eee;
	color: #27acd9;
	border-radius: 100vh;
	position: relative;
	transition: 0.5s;
}
a.btn_13::before {
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	right: 1em;
	transform: translateY(calc(-50% - 2px)) rotate(45deg);
	width: 10px;
	height: 1px;
	background: #27acd9;
}
a.btn_13::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
	width: 50px;
	height: 1px;
	background-color: #27acd9;
}
a.btn_13:hover {
	background: #d4eef7;
	color: #27acd9;
}

a.btn_13 {

display: flex;

justify-content: space-between;

align-items: center;

text-align: center;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

background: #eee;

color: #27acd9;

border-radius: 100vh;

position: relative;

transition: 0.5s;

}

a.btn_13::before {

content: '';

position: absolute;

top: calc(50% - 2px);

right: 1em;

transform: translateY(calc(-50% - 2px)) rotate(45deg);

width: 10px;

height: 1px;

background: #27acd9;

}

a.btn_13::after {

content: '';

position: absolute;

top: 50%;

right: 1em;

transform: translateY(-50%);

width: 50px;

height: 1px;

background-color: #27acd9;

}

a.btn_13:hover {

background: #d4eef7;

color: #27acd9;

}

Button

左側にFont Awesomeのアイコンを置いたボタンデザイン。

コードを表示

HTML

<a href="" class="btn_14">Button</a>

1	<a href="" class="btn_14">Button</a>

CSS

a.btn_14 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	border-bottom: 7px solid #0686b2;
	background: #27acd9;
	color: #fff;
}
a.btn_14:before {
    content: "\f0e0";
    position: relative;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 15px;
}
a.btn_14:hover {
	margin-top: 6px;
	border-bottom: 1px solid #0686b2;
	color: #fff;
}

a.btn_14 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

position: relative;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border-radius: 0.3rem;

border-bottom: 7px solid #0686b2;

background: #27acd9;

color: #fff;

}

a.btn_14:before {

content: "\f0e0";

position: relative;

font-family: "Font Awesome 5 Free";

font-weight: 900;

margin-right: 15px;

}

a.btn_14:hover {

margin-top: 6px;

border-bottom: 1px solid #0686b2;

color: #fff;

}

カジュアルなボタンデザイン

Button

斜線で囲ったカジュアルなボタンデザイン。マウスオンで実線に変化します。

コードを表示

HTML

<a href="" class="btn_15">Button</a>

1	<a href="" class="btn_15">Button</a>

CSS

a.btn_15 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	background-color: #e9f6fb;
	border-image-source: repeating-linear-gradient(45deg, #27acd9 0, #27acd9 6px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 8px);
	border-image-slice: 4;
	border-width: 4px;
	border-image-repeat: round;
	border-style: solid;
	color: #27acd9;
}
a.btn_15:hover {
	border: 4px solid #27acd9;
	color: #27acd9;
}

a.btn_15 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

position: relative;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border-radius: 0.3rem;

background-color: #e9f6fb;

border-image-source: repeating-linear-gradient(45deg, #27acd9 0, #27acd9 6px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 8px);

border-image-slice: 4;

border-width: 4px;

border-image-repeat: round;

border-style: solid;

color: #27acd9;

}

a.btn_15:hover {

border: 4px solid #27acd9;

color: #27acd9;

}

Button

右側にスタイリッシュな矢印の付いたボタンデザイン。マウスオンで背景が色付きます。

コードを表示

HTML

<a href="" class="btn_16">Button</a>

1	<a href="" class="btn_16">Button</a>

CSS

a.btn_16 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	border: 2px dashed #27acd9;
	color: #27acd9;
	box-shadow: 5px 5px 0 #27acd9;
	transition: 0.3s ease-in-out;
}
a.btn_16:hover {
	box-shadow: 0 0 0;
	transform: translate(5px, 5px);
	color: #27acd9;
}

a.btn_16 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

position: relative;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border-radius: 0.3rem;

border: 2px dashed #27acd9;

color: #27acd9;

box-shadow: 5px 5px 0 #27acd9;

transition: 0.3s ease-in-out;

}

a.btn_16:hover {

box-shadow: 0 0 0;

transform: translate(5px, 5px);

color: #27acd9;

}

Button

囲み線をずらしたボタンデザイン。マウスオンで線と背景が重なってカラーが反転します。

コードを表示

HTML

<a href="" class="btn_17">Button</a>

1	<a href="" class="btn_17">Button</a>

CSS

a.btn_17 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	color: #27acd9;
	background: #e1f3f9;
	transition: 0.3s ease-in-out;
}
a.btn_17::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #27acd9;
  transition: 0.2s;
}
a.btn_17:hover {
	background: #27acd9;
	color: #fff;
}
a.btn_17:hover::before {
  top: 0;
  left: 0;
}

a.btn_17 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

position: relative;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

color: #27acd9;

background: #e1f3f9;

transition: 0.3s ease-in-out;

}

a.btn_17::before {

content: '';

position: absolute;

top: -5px;

left: -5px;

width: calc(100% - 4px);

height: calc(100% - 4px);

border: 2px solid #27acd9;

transition: 0.2s;

}

a.btn_17:hover {

background: #27acd9;

color: #fff;

}

a.btn_17:hover::before {

top: 0;

left: 0;

}

Button

太い囲み線+斜め後ろに影を入れたボタンデザイン。マウスオンで実際にボタンを押したようなアクションに。

コードを表示

HTML

<a href="" class="btn_18">Button</a>

1	<a href="" class="btn_18">Button</a>

CSS

a.btn_18 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 10px;
	color: #27acd9;
	border: 3px solid #27acd9;
	box-shadow: 5px 5px #27acd9;
	transition: 0.3s ease-in-out;
}
a.btn_18:hover {
	box-shadow: none;
	transform: translate(5px, 5px);
	color: #27acd9;
}

a.btn_18 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

position: relative;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border-radius: 10px;

color: #27acd9;

border: 3px solid #27acd9;

box-shadow: 5px 5px #27acd9;

transition: 0.3s ease-in-out;

}

a.btn_18:hover {

box-shadow: none;

transform: translate(5px, 5px);

color: #27acd9;

}

動くボタンデザイン

Button

上下に跳ねるボタンデザイン。マウスオンでカラーが反転します。

コードを表示

HTML

<a href="" class="btn_19">Button</a>

1	<a href="" class="btn_19">Button</a>

CSS

a.btn_19 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 5px;
	transition: 0.5s;
	animation: move_a 2s infinite;
}
@keyframes move_a {
    0% {transform: translate(0px, 4px);}
    5% {transform: translate(0px, -4px);}
    10% {transform: translate(0px, 4px);}
    15% {transform: translate(0px, -4px);}
    20% {transform: translate(0px, 4px);}
    25% {transform: translate(0px, -4px);}
    30% {transform: translate(0px, 0px);}
}
a.btn_19:hover {
	color: #27acd9;
	background: #fff;
}

a.btn_19 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border: 2px solid #27acd9;

background: #27acd9;

color: #fff;

border-radius: 5px;

transition: 0.5s;

animation: move_a 2s infinite;

}

@keyframes move_a {

0% {transform: translate(0px, 4px);}

5% {transform: translate(0px, -4px);}

10% {transform: translate(0px, 4px);}

15% {transform: translate(0px, -4px);}

20% {transform: translate(0px, 4px);}

25% {transform: translate(0px, -4px);}

30% {transform: translate(0px, 0px);}

}

a.btn_19:hover {

color: #27acd9;

background: #fff;

}

Button

左右に揺れるボタンデザイン。マウスオンでカラーが反転します。

コードを表示

HTML

<a href="" class="btn_20">Button</a>

1	<a href="" class="btn_20">Button</a>

CSS

a.btn_20 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 5px;
	transition: 0.5s;
	animation: move_b 2s infinite;
}
@keyframes move_b {
    0% {transform: translate(4px, 0px);}
    5% {transform: translate(-4px, 0px);}
    10% {transform: translate(4px, 0px);}
    15% {transform: translate(-4px, 0px);}
	20% {transform: translate(4px, 0px);}
    25% {transform: translate(-4px, 0px);}
    30% {transform: translate(0px, 0px);}
}
a.btn_20:hover {
	color: #27acd9;
	background: #fff;
}

a.btn_20 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border: 2px solid #27acd9;

background: #27acd9;

color: #fff;

border-radius: 5px;

transition: 0.5s;

animation: move_b 2s infinite;

}

@keyframes move_b {

0% {transform: translate(4px, 0px);}

5% {transform: translate(-4px, 0px);}

10% {transform: translate(4px, 0px);}

15% {transform: translate(-4px, 0px);}

20% {transform: translate(4px, 0px);}

25% {transform: translate(-4px, 0px);}

30% {transform: translate(0px, 0px);}

}

a.btn_20:hover {

color: #27acd9;

background: #fff;

}

Button

シーソーのように中心を軸にゆらゆら揺れるボタンデザイン。マウスオンでカラーが反転します。

コードを表示

HTML

<a href="" class="btn_21">Button</a>

1	<a href="" class="btn_21">Button</a>

CSS

a.btn_21 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 5px;
	transition: 0.5s;
	animation: move_c 1s infinite;
}
@keyframes move_c {
    0% {transform: translate(0px, 0)}
    50% {transform: translate(0px, 0) rotateZ(5deg)}
}
a.btn_21:hover {
	color: #27acd9;
	background: #fff;
}

a.btn_21 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border: 2px solid #27acd9;

background: #27acd9;

color: #fff;

border-radius: 5px;

transition: 0.5s;

animation: move_c 1s infinite;

}

@keyframes move_c {

0% {transform: translate(0px, 0)}

50% {transform: translate(0px, 0) rotateZ(5deg)}

}

a.btn_21:hover {

color: #27acd9;

background: #fff;

}

Button

ピコピコとボタンを押す動きを繰り返すボタンデザイン。マウスオンでカラーが反転します。

コードを表示

HTML

<a href="" class="btn_22">Button</a>

1	<a href="" class="btn_22">Button</a>

CSS

a.btn_22 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 5px;
	transition: 0.5s;
	animation: move_d 2s infinite;
	box-shadow: 0 5px 0 rgb(6, 134, 178, 1);
	position: relative;
}
@keyframes move_d {
    0% {box-shadow: 0 5px 0 rgb(6, 134, 178, 1); top: 0px;}
    10% {box-shadow: 0 0 0 rgb(6, 134, 178, 1); top: 5px;}
    20% {box-shadow: 0 5px 0 rgb(6, 134, 178, 1); top: 0px;}
    30% {box-shadow: 0 0 0 rgb(6, 134, 178, 1); top: 5px;}
    40% {box-shadow: 0 5px 0 rgb(6, 134, 178, 1); top: 0px;}
}
a.btn_22:hover {
	color: #27acd9;
	background: #fff;
	border: 2px solid #0686b2;
}

a.btn_22 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border: 2px solid #27acd9;

background: #27acd9;

color: #fff;

border-radius: 5px;

transition: 0.5s;

animation: move_d 2s infinite;

box-shadow: 0 5px 0 rgb(6, 134, 178, 1);

position: relative;

}

@keyframes move_d {

0% {box-shadow: 0 5px 0 rgb(6, 134, 178, 1); top: 0px;}

10% {box-shadow: 0 0 0 rgb(6, 134, 178, 1); top: 5px;}

20% {box-shadow: 0 5px 0 rgb(6, 134, 178, 1); top: 0px;}

30% {box-shadow: 0 0 0 rgb(6, 134, 178, 1); top: 5px;}

40% {box-shadow: 0 5px 0 rgb(6, 134, 178, 1); top: 0px;}

}

a.btn_22:hover {

color: #27acd9;

background: #fff;

border: 2px solid #0686b2;

}

ホバーアクションが個性的なボタンデザイン

Button

マウスオンで左側から色が変わります。

コードを表示

HTML

<a href="" class="btn_23">Button</a>

1	<a href="" class="btn_23">Button</a>

CSS

a.btn_23 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	color: #27acd9;
	cursor: pointer;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
}
a.btn_23::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(39, 172, 217);
	transform: translateX(-100%);
	transition: all .3s;
	z-index: -1;
}
a.btn_23:hover::before {
	transform: translateX(0);
}
a.btn_23:hover {
	color: #fff;
}

a.btn_23 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border: 2px solid #27acd9;

color: #27acd9;

cursor: pointer;

position: relative;

overflow: hidden;

z-index: 1;

}

a.btn_23::before {

content: "";

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: rgb(39, 172, 217);

transform: translateX(-100%);

transition: all .3s;

z-index: -1;

}

a.btn_23:hover::before {

transform: translateX(0);

}

a.btn_23:hover {

color: #fff;

}

Button

マウスオンで下側から円形状に色が変わります。

コードを表示

HTML

<a href="" class="btn_24">Button</a>

1	<a href="" class="btn_24">Button</a>

CSS

a.btn_24 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 4px;
	border: 1px solid #27acd9;
	color: #27acd9;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
	transition: all 0.2s ease-in;
}
a.btn_24:before {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%) scaleY(1) scaleX(1.25);
 top: 100%;
 width: 140%;
 height: 180%;
 background-color: rgba(0, 0, 0, 0.05);
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

a.btn_24:after {
 content: "";
 position: absolute;
 left: 55%;
 transform: translateX(-50%) scaleY(1) scaleX(1.45);
 top: 180%;
 width: 160%;
 height: 190%;
 background-color: #27acd9;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

a.btn_24:hover {
 color: #ffffff;
 border: 1px solid #27acd9;
}

a.btn_24:hover:before {
 top: -35%;
 background-color: #27acd9;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

a.btn_24:hover:after {
 top: -45%;
 background-color: #27acd9;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

a.btn_24 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

font-weight: bold;

border-radius: 4px;

border: 1px solid #27acd9;

color: #27acd9;

position: relative;

overflow: hidden;

z-index: 1;

transition: all 0.2s ease-in;

}

a.btn_24:before {

content: "";

position: absolute;

left: 50%;

transform: translateX(-50%) scaleY(1) scaleX(1.25);

top: 100%;

width: 140%;

height: 180%;

background-color: rgba(0, 0, 0, 0.05);

border-radius: 50%;

display: block;

transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);

z-index: -1;

}

a.btn_24:after {

content: "";

position: absolute;

left: 55%;

transform: translateX(-50%) scaleY(1) scaleX(1.45);

top: 180%;

width: 160%;

height: 190%;

background-color: #27acd9;

border-radius: 50%;

display: block;

transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);

z-index: -1;

}

a.btn_24:hover {

color: #ffffff;

border: 1px solid #27acd9;

}

a.btn_24:hover:before {

top: -35%;

background-color: #27acd9;

transform: translateX(-50%) scaleY(1.3) scaleX(0.8);

}

a.btn_24:hover:after {

top: -45%;

background-color: #27acd9;

transform: translateX(-50%) scaleY(1.3) scaleX(0.8);

}

Button

マウスオンでグラデーションに変化します。

コードを表示

HTML

<a href="" class="btn_25"><span>Button</span></a>

1	<a href="" class="btn_25"><span>Button</span></a>

CSS

a.btn_25 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	height: 4rem;
	width: 120px;
	margin: auto;
	padding: 0 4rem;
	border-radius: 100vw;
	background: #6a6e78;
	background-size: 400%;
	color: #fff;
}
a.btn_25:hover::before {
  transform: scaleX(1);
}
a.btn_25:hover {
	color: #fff;
}
a.btn_25 span {
  position: relative;
  z-index: 1;
}
a.btn_25::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(
    82.3deg,
    rgba(39, 172, 217, 1) 10.8%,
    rgba(18, 83, 229, 1) 94.3%
  );
  transition: all 0.475s;
}

a.btn_25 {

display: flex;

justify-content: center;

align-items: center;

position: relative;

overflow: hidden;

text-decoration: none;

height: 4rem;

width: 120px;

margin: auto;

padding: 0 4rem;

border-radius: 100vw;

background: #6a6e78;

background-size: 400%;

color: #fff;

}

a.btn_25:hover::before {

transform: scaleX(1);

}

a.btn_25:hover {

color: #fff;

}

a.btn_25 span {

position: relative;

z-index: 1;

}

a.btn_25::before {

content: '';

position: absolute;

top: 0;

left: 0;

transform: scaleX(0);

transform-origin: 0 50%;

width: 100%;

height: inherit;

border-radius: inherit;

background: linear-gradient(

82.3deg,

rgba(39, 172, 217, 1) 10.8%,

rgba(18, 83, 229, 1) 94.3%

);

transition: all 0.475s;

}

Button

マウスオンでシャドウがモワッと広がります。

コードを表示

HTML

<a href="" class="btn_26">Button</a>

1	<a href="" class="btn_26">Button</a>

CSS

a.btn_26 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	border-radius: 100vw;
	color: #fff;
	background: #27acd9;
}
a.btn_26:hover {
	background-position: right center;
	background-size: 200% auto;
	-webkit-animation: pulse 2s infinite;
	animation: shad26 1.5s infinite;
	color: #fff;
}
@keyframes shad26 {
	0% {box-shadow: 0 0 0 0 #27acd9;}
	70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}
	100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}
}

a.btn_26 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

border-radius: 100vw;

color: #fff;

background: #27acd9;

}

a.btn_26:hover {

background-position: right center;

background-size: 200% auto;

-webkit-animation: pulse 2s infinite;

animation: shad26 1.5s infinite;

color: #fff;

}

@keyframes shad26 {

0% {box-shadow: 0 0 0 0 #27acd9;}

70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}

100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}

}

Button

マウスオンでラインで囲いながらカラーが反転します。

コードを表示

HTML

<a href="" class="btn_27">Button</a>

1	<a href="" class="btn_27">Button</a>

CSS

a.btn_27 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	color: #fff;
	font-weight: bold;
	background: #27acd9;
	position: relative;
	transition: 0.3s ease-in-out;
}
a.btn_27:hover {
    background: #fff;
    color: #27acd9;
}
a.btn_27:before, a.btn_27:after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
a.btn_27:before {
  top: 0;
  left: 0;
}
a.btn_27:after {
  bottom: 0;
  right: 0;
}
a.btn_27:hover:before, a.btn_27:hover:after {
  width: 100%;
  height: 100%;
}
a.btn_27:hover:before {
  border-top-color: #27acd9;
  border-right-color: #27acd9;
  transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
a.btn_27:hover:after {
  border-bottom-color: #27acd9;
  border-left-color: #27acd9;
  transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
}

a.btn_27 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

color: #fff;

font-weight: bold;

background: #27acd9;

position: relative;

transition: 0.3s ease-in-out;

}

a.btn_27:hover {

background: #fff;

color: #27acd9;

}

a.btn_27:before, a.btn_27:after {

box-sizing: inherit;

content: "";

position: absolute;

border: 2px solid transparent;

width: 0;

height: 0;

}

a.btn_27:before {

top: 0;

left: 0;

}

a.btn_27:after {

bottom: 0;

right: 0;

}

a.btn_27:hover:before, a.btn_27:hover:after {

width: 100%;

height: 100%;

}

a.btn_27:hover:before {

border-top-color: #27acd9;

border-right-color: #27acd9;

transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;

}

a.btn_27:hover:after {

border-bottom-color: #27acd9;

border-left-color: #27acd9;

transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;

}

Button

マウスオンで全体がグラデーションに変化します。

コードを表示

HTML

<a href="" class="btn_28"><span>Button</span></a>

1	<a href="" class="btn_28"><span>Button</span></a>

CSS

a.btn_28 {
	margin: auto;
	width: 240px;
	padding: 3px;
	align-items: center;
	text-align: center;
	background-image: linear-gradient(145deg,#27acd9 , #195892 50%,#b4e12b);
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-weight: bold;
	display: flex;
	justify-content: center;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	cursor: pointer;
	transition: all .3s;
}
a.btn_28:active,a.btn_28:hover {
 outline: 0;
}
a.btn_28 span {
 background: #000;
 padding: 1rem 4rem;
 border-radius: 6px;
 width: 100%;
 height: 100%;
 transition: 300ms;
}
a.btn_28:hover span {
 background: none;
	color: #fff;
}

a.btn_28 {

margin: auto;

width: 240px;

padding: 3px;

align-items: center;

text-align: center;

border: 0;

border-radius: 10px;

color: #fff;

font-weight: bold;

display: flex;

justify-content: center;

text-decoration: none;

user-select: none;

-webkit-user-select: none;

touch-action: manipulation;

white-space: nowrap;

cursor: pointer;

transition: all .3s;

}

a.btn_28:active,a.btn_28:hover {

outline: 0;

}

a.btn_28 span {

background: #000;

padding: 1rem 4rem;

border-radius: 6px;

width: 100%;

height: 100%;

transition: 300ms;

}

a.btn_28:hover span {

background: none;

color: #fff;

}

Button

マウスオンでキラリと光ります。

コードを表示

HTML

<a href="" class="btn_29">Button</a>

1	<a href="" class="btn_29">Button</a>

CSS

a.btn_29 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	position: relative;
	border-radius: 5px;
	border: 1px solid #27acd9;
	font-weight: bold;
	letter-spacing: 2px;
	background: transparent;
	color: #27acd9;
	overflow: hidden;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
a.btn_29:hover {
	color: #fff;
	background: #27acd9;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
a.btn_29:hover::before {
	-webkit-animation: sh02 0.5s 0s linear;
	-moz-animation: sh02 0.5s 0s linear;
	animation: light 0.5s 0s linear;
}
a.btn_29::before {
	content: '';
	display: block;
	width: 0px;
	height: 86%;
	position: absolute;
	top: 7%;
	left: 0%;
	opacity: 0;
	background: #fff;
	box-shadow: 0 0 50px 30px #fff;
	-webkit-transform: skewX(-20deg);
	-moz-transform: skewX(-20deg);
	-ms-transform: skewX(-20deg);
	-o-transform: skewX(-20deg);
	transform: skewX(-20deg);
}
@keyframes light {
	from {opacity: 0; left: 0%;}
	50% {opacity: 1;}
	to {opacity: 0;left: 100%;}
}

a.btn_29 {

display: block;

text-align: center;

vertical-align: middle;

text-decoration: none;

width: 120px;

margin: auto;

padding: 1rem 4rem;

position: relative;

border-radius: 5px;

border: 1px solid #27acd9;

font-weight: bold;

letter-spacing: 2px;

background: transparent;

color: #27acd9;

overflow: hidden;

-webkit-transition: all 0.2s ease-in;

-moz-transition: all 0.2s ease-in;

transition: all 0.2s ease-in;

}

a.btn_29:hover {

color: #fff;

background: #27acd9;

-webkit-transition: all 0.2s ease-out;

-moz-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}

a.btn_29:hover::before {

-webkit-animation: sh02 0.5s 0s linear;

-moz-animation: sh02 0.5s 0s linear;

animation: light 0.5s 0s linear;

}

a.btn_29::before {

content: '';

display: block;

width: 0px;

height: 86%;

position: absolute;

top: 7%;

left: 0%;

opacity: 0;

background: #fff;

box-shadow: 0 0 50px 30px #fff;

-webkit-transform: skewX(-20deg);

-moz-transform: skewX(-20deg);

-ms-transform: skewX(-20deg);

-o-transform: skewX(-20deg);

transform: skewX(-20deg);

}

@keyframes light {

from {opacity: 0; left: 0%;}

50% {opacity: 1;}

to {opacity: 0;left: 100%;}

}

Thanks
Button

マウスオンでテキストと背景の表示が立体的に切り変わります。

コードを表示

HTML

<a href="" class="btn_30">
		<span class="side top">Thanks</span>
    	<span class="side front">Button</span>
</a>

<span class="side top">Thanks</span>

<span class="side front">Button</span>

</a>

CSS

a.btn_30 {
	display: flex;
	vertical-align: middle;
	text-decoration: none;
	margin: auto;
	width: 20em;
	height: 4em;
	color: #ccc;
	cursor: pointer;
	transition: all 0.85s cubic-bezier(.17,.67,.14,.93);
	transform-style: preserve-3d;
	transform-origin: 100% 50%;
}
a.btn_30:hover {
	transform: rotateX(-90deg);
}
a.btn_30 .side {
	box-sizing: border-box;
	position: absolute;
	display: inline-block;
	width: 20em;
	text-align: center;
	padding: 1.2rem 4rem;
	font-weight: bold;
	letter-spacing: 2px;
}
a.btn_30 .top {
	background: #b4e12b;
	color: #fff;
	transform: rotateX(90deg) translate3d(0, 0, 2em);
}
a.btn_30 .front {
	background: #27acd9;
	color: #fff;
	transform: translate3d(0, 0, 2em);
}

a.btn_30 {

display: flex;

vertical-align: middle;

text-decoration: none;

margin: auto;

width: 20em;

height: 4em;

color: #ccc;

cursor: pointer;

transition: all 0.85s cubic-bezier(.17,.67,.14,.93);

transform-style: preserve-3d;

transform-origin: 100% 50%;

}

a.btn_30:hover {

transform: rotateX(-90deg);

}

a.btn_30 .side {

box-sizing: border-box;

position: absolute;

display: inline-block;

width: 20em;

text-align: center;

padding: 1.2rem 4rem;

font-weight: bold;

letter-spacing: 2px;

}

a.btn_30 .top {

background: #b4e12b;

color: #fff;

transform: rotateX(90deg) translate3d(0, 0, 2em);

}

a.btn_30 .front {

background: #27acd9;

color: #fff;

transform: translate3d(0, 0, 2em);

}

まとめ

今回も様々なサイトで使い回しができるように、なるべくシンプルに仕上げました。
一見シンプルなボタンでもホバーアクションを工夫すればデザイン性もグッと上がりますね！
是非ご活用ください！

無料相談の流れ

1.お申込み

下記お申込フォームより、お気軽にご連絡ください。

2.日程調整

担当より日程のご連絡をいたします。

3.無料相談

30分程度の相談会を実施いたします。

4.商談

弊社サービスをご検討頂ける場合には、お見積もりやサービスのご案内をさせて頂きます。

無料相談　ご利用後の流れ

しつこい電話セールスなどは一切いたしません。逆に、弊社サービスをご検討頂ける場合には、お見積もりやサービス内の詳細についてご案内をさせて頂きます。

ただ、メルマガの登録だけお願いします。
このメルマガでは新サービスの案内やコラムの更新情報のご案内をしております。

メルマガの解除はいつでもできますので、そこだけご理解とご協力をお願いいします。

▼お申し込みはこちらから

Web集客の無料相談こちらをクリック

Webで売上を伸ばすためには、
「認知」「集客」「教育」「販売」
このステップが大事です。

しかし、Webで売上を伸ばせていないほとんどのケースは、この4つを正しく理解して運用出来ていません。

例えば、、、

あなたのお客様について適切な分析が出来ていない
マーケットを正しく分析が出来ていない
SNSやブログについて正しい知識が無い
Web集客の対策に必要な技術や時間がない
売れる仕組みの確立が出来ていない

この内容は、我々のようなWeb集客の専門業者でも日々情報を集め、何度もテストを繰り返し失敗を重ねながら正解を探している工程です。
その工程を無くして、Webからの売上を伸ばす事が出来るでしょうか？

無理ですよね。

エクセレントでは、Webを利用して売上を伸ばす「認知」「集客」「教育」「販売」このステップについてしっかりとサポートさせて頂きます。

あなたの商品やサービスについて分析し、売上アップ出来るまで伴走型サポートにて対応させて頂きます。

そんな当社の売上アップのための伴走型サポートについてご興味がございましたら、お気軽にお電話・メール・LINEにてご連絡ください。

お問い合わせはこちら

Instagram運用によるWeb集客が得意な会社　株式会社エクセレント

下川宜子

デザイン業務を担当しています。10年以上の実務経験の中で様々なジャンルのサイト制作に携わりました。ユーザー目線を大切にしたランディングページ制作を得意としています。

Instagram(インスタグラム)のまとめ機能とは？使い方とメリットを詳しく解説！

Instagram(インスタグラム)のアカウントの制限とは？その設定方法と運用方法について解説します

コピペですぐ使える！ビジネスライクなCSSボタンデザイン30選

シンプルなボタンデザイン

立体的なボタンデザイン

グラデーションのボタンデザイン

矢印やアイコンの付いたボタンデザイン

カジュアルなボタンデザイン

動くボタンデザイン

ホバーアクションが個性的なボタンデザイン

まとめ

無料相談の流れ

無料相談 ご利用後の流れ

関連記事

カテゴリー

ビジネス初心者必見！サブスク型ホームページ制作で無理なくWEB集客を始める方法

コストを抑えて自社のホームページを持つ方法｜サブスク型ホームページ制作のススメ

もうホームページ制作に高額な費用は不要です。制作費用ゼロ・初期費用ゼロ 飲食店の希望を叶えるサブスク型ホームページ制作

【2024年最新】月額定額制(サブスク型)ホームページ制作で失敗しない！メリット・デメリット、選び方のポイントを解説

ホームページだけにWEB集客を頼るのは危険！ここから先はSNSと併用する事が常識です

飲食店がInstagramでのリーチ数を爆上げする裏技

集客に悩む地方ビジネスオーナーのための効果的なWeb集客完全ガイド

デジタルマーケティングとは？デジタル時代の勝者になるためのデジタルマーケティング完全ガイド

Instagram集客の費用はいくら？自社でできる費用対効果の高い方法とは

来店者が減少し売上が落ち込んでいる時にデジタルマーケティングを利用する具体策

Instagram(インスタグラム)のリール動画の音源を保存して活用する方法

Instagramのリール動画やTicktockやYoutubeのショート動画にたくさんの会社が力を入れている理由

Instagram(インスタグラム)で集客を始める時に知っておくべき集客のコツ12選

初心者が知っておくべき基本的なSEO対策とは？上位表示に必要なやり方・方法について解説します。

検索意図とは？SEO対策で重要な調べ方と考え方を解説します。

ホームページが検索結果に表示されない時の原因と対処方法を徹底解説！

【2022年版】Web集客の種類とその方法を集客にお困りのあなたに分かりやすく解説します

SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

これを見れば完璧！Google Maps API 取得方法をご紹介します。

人気サービスランキング

無料相談　ご利用後の流れ

もうホームページ制作に高額な費用は不要です。制作費用ゼロ・初期費用ゼロ　飲食店の希望を叶えるサブスク型ホームページ制作