CSSで作るボタンのデザインサンプル【グラデーションでおしゃれに】

CSS

全サンプル共通のコード

全てのサンプルで使っているコードです。

これにそれぞれのサンプルのコードを付け加えてください。

<a href="" class="btn">ボタン</a>
.btn {
	display: inline-block;
	line-height: 50px;
	padding: 0 30px;
	border-radius: 3px;
	transition: .3s;
}

デザインサンプル

ホバーすると薄くなる

ボタン
.btn {
	background-color: #585858;
	color: #FAFAFA;
}

.btn:hover {
	opacity: .7;
}

背景色が変わる

ボタン
.btn {
	background-color: #585858;
	color: #FAFAFA;
}

.btn:hover {
	background-color: #F781BE;
}

反転する

ボタン
.btn {
	border: 1px solid #585858;
	color: #585858;
}

.btn:hover {
	background-color: #585858;
	color: #FAFAFA;
}

角が丸くなる

ボタン
.btn {
	background-color: #585858;
	color: #FAFAFA;
}

.btn:hover {
	border-radius: 25px;
}

ホバーするとへこむ

ボタン
.btn {
	background-color: #848484;
	color: #FAFAFA;
	box-shadow: 0 5px #585858;
	position: relative;
	top: 0;
}

.btn:hover {
	box-shadow: none;
	top: 5px;
}

クリックするとへこむ

ボタン
.btn {
	background-color: #848484;
	color: #FAFAFA;
	box-shadow: 0 5px #585858;
	position: relative;
	top: 0;
}

.btn:active {
	box-shadow: none;
	top: 5px;
}

浮き出てくる

ボタン
.btn {
	background-color: #585858;
	color: #FAFAFA;
	position: relative;
	bottom: 0;
	transform: scale(.97);
}

.btn:hover {
	bottom: 3px;
	box-shadow: 0 3px 10px #BDBDBD;
	transform: none;
}

沈む

ボタン
.btn {
	background-color: #585858;
	color: #FAFAFA;
	position: relative;
	bottom: 3px;
	box-shadow: 0 3px 10px #BDBDBD;
}

.btn:hover {
	bottom: 0;
	box-shadow: none;
	transform: scale(.97);
}

クリックすると沈む

ボタン
.btn {
	background-color: #585858;
	color: #FAFAFA;
	position: relative;
	bottom: 3px;
	box-shadow: 0 3px 10px #BDBDBD;
}

.btn:active {
	bottom: 0;
	box-shadow: none;
	transform: scale(.97);
}

グラデーション

ボタン
.btn {
	background: linear-gradient(to right bottom, #37ecba, #72afd3);
	color: #FAFAFA;
}

.btn:hover {
	opacity: .7;
}

単色⇒グラデーション

ボタン
.btn {
	background-color: #585858;
	color: #FAFAFA;
	position: relative;
	overflow: hidden;
}

.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right bottom, #37ecba, #72afd3);
	z-index: -1;
}

.btn:hover {
	background-color: transparent;
}

linear-gradient()にはtransitionが効かないので、before要素を後ろに配置し、前側の.btnの背景を透明にすることでグラデーションがゆっくり切り替わるようにしています。

グラデーション⇒グラデーション

ボタン
.btn {
	color: #FAFAFA;
	position: relative;
	overflow: hidden;
}

.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right bottom, #37ecba, #72afd3);
	z-index: -1;
	transition: .3s;
}

.btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right bottom, #fa709a, #fee140);
	z-index: -2;
}

.btn:hover::before {
	opacity: 0;
}

ストライプ

ボタン
.btn {
	background: linear-gradient(135deg, #52afdc 25%, #3394c3 25%, #3394c3 50%, #52afdc 50%, #52afdc 75%, #3394c3 75%);
	background-size: 8px 8px; /* サイズ変更可 */
	color: #FAFAFA;
}

.btn:hover {
	opacity: .7;
}

単色⇒ストライプ

ボタン
.btn {
	background-color: #585858;
	color: #FAFAFA;
	position: relative;
	overflow: hidden;
}

.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #52afdc 25%, #3394c3 25%, #3394c3 50%, #52afdc 50%, #52afdc 75%, #3394c3 75%);
	background-size: 8px 8px; /* サイズ変更可 */
	z-index: -1;
}

.btn:hover {
	background-color: transparent;
}

チェック柄

ボタン
.btn {
	background-color: #52afdc;
	background-image: linear-gradient(135deg, #3394c3 25%, transparent 25%, transparent 75%, #3394c3 75%), linear-gradient(135deg, #3394c3 25%, transparent 25%, transparent 75%, #3394c3 75%);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px; /* 上の2倍 */
	color: #FAFAFA;
}

.btn:hover {
	opacity: .7;
}

background-colorで1つ目の色を、background-imageで2つ目の色を指定しています。

linear-gradient()を2つ指定して、それぞれbackground-positionを違わせることで、うまいことチェック柄を実現しています。

単色⇒チェック柄

ボタン
.btn {
	background-color: #585858;
	color: #FAFAFA;
	position: relative;
	overflow: hidden;
}

.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #52afdc;
	background-image: linear-gradient(135deg, #3394c3 25%, transparent 25%, transparent 75%, #3394c3 75%), linear-gradient(135deg, #3394c3 25%, transparent 25%, transparent 75%, #3394c3 75%);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px; /* 上の2倍 */
	z-index: -1;
}

.btn:hover {
	background-color: transparent;
}