Kinchan's Blog

Sep 23rd, 2020 - About CSS - Written by

CSS Simple Button Sample

web言語ロゴ

共通のHTML･CSS

HTML

Copied

COPY

<a  href="#" class="cssBtn">BUTTON</a>

CSS

Copied

COPY

.cssBtn{
	display: inline-block;
	padding: 0.5em 2em;
	text-align: center;
	text-decoration: none;
	outline: none;
	vertical-align: bottom;
	transition: 0.3s; /*ふわっと変化が要らなければここを削除*/
}

上記のコードをベースにcssBtn1,cssBtn2とclassを追加してボタンを形成していきますが、ページ内で1パターンしか利用しないのであればベースのcssBtnに直接追加記述する形がよいと思います。

BUTTON LIST

Hoverで背景色変更(塗りつぶし)

BUTTON

コードを見る

HTML

Copied

COPY

<a  href="#" class="cssBtn cssBtn1">BUTTON</a>

CSS

Copied

COPY

.cssBtn1{
	background-color: #576F9C;
	color:#FFF;
}
.cssBtn1:hover{
	background-color: #F24249;
}

角丸にしたい場合は.cssBtn1にborder-radiusを追加して調整。

Hoverで背景･文字色反転(ボーダー)

BUTTON

コードを見る

HTML

Copied

COPY

<a  href="#" class="cssBtn cssBtn2">BUTTON</a>

CSS

Copied

COPY

.cssBtn2{
	border: 2px solid #576F9C;
	color: #576F9C;
}
.cssBtn2:hover{
	color: #FFF;
	background-color: #576F9C;
}

角丸にしたい場合は.cssBtn2にborder-radiusを追加して調整。

マテリアルボタン(影付き)

BUTTON

コードを見る

HTML

Copied

COPY

<a  href="#" class="cssBtn cssBtn3">BUTTON</a>

CSS

Copied

COPY

.cssBtn3{
	color:#FFF;
	background-color: #576F9C;
	box-shadow:
	0 3px 1px -2px rgba(0, 0, 0, 0.2),
	0 2px 2px 0 rgba(0, 0, 0, 0.14),
	0 1px 5px 0 rgba(0,0,0,.12);
}
.cssBtn3:hover{
	box-shadow:
	0 2px 4px -1px rgba(0, 0, 0, 0.2),
	0 4px 5px 0 rgba(0, 0, 0, 0.14),
	0 1px 10px 0 rgba(0,0,0,.12);
}

角丸にしたい場合は.cssBtn3にborder-radiusを追加して調整。

マテリアルボタン(フラット)

BUTTON

コードを見る

HTML

Copied

COPY

<a  href="#" class="cssBtn cssBtn4">BUTTON</a>

CSS

Copied

COPY

.cssBtn4{
	color:#576F9C;
}
.cssBtn4:hover{
	color:#576F9C;
	background-color: #edf4ff;
}

角丸にしたい場合は.cssBtn4にborder-radiusを追加して調整。

マテリアルボタン(影付き･押せる)

BUTTON

コードを見る

HTML

Copied

COPY

<a  href="#" class="cssBtn cssBtn5">BUTTON</a>

CSS

Copied

COPY

.cssBtn5{
	color:#FFF;
	background-color: #576F9C;
	box-shadow:
	0 3px 0 #3d5073,
	0 6px 4px -5px rgba(0, 0, 0, 0.2),
	0 5px 5px 0 rgba(0, 0, 0, 0.14),
	0 4px 8px 0 rgba(0,0,0,.12);
	position: relative;
}
.cssBtn5:hover{
	box-shadow:
	0 3px 0 #3d5073,
	0 4px 6px -3px rgba(0, 0, 0, 0.2),
	0 6px 7px 0 rgba(0, 0, 0, 0.14),
	0 3px 12px 0 rgba(0,0,0,.12);
}
.cssBtn5:active {
	top: 3px;
	box-shadow: none;
}

角丸にしたい場合は.cssBtn5にborder-radiusを追加して調整。

マテリアルボタン(リップル風)

BUTTON

コードを見る

HTML

Copied

COPY

<a  href="#" class="cssBtn cssBtn6">BUTTON<span></span></a>

CSS

Copied

COPY

.cssBtn6{
	background-color: #576F9C;
	color:#FFF;
	position: relative;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
	z-index: 0;
}
.cssBtn6:active {
	background: #436096;
}
.cssBtn6 span {
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
}
.cssBtn6 span:before {
	position: relative;
	content: "";
	display: block;
	margin-top: 100%;
}
.cssBtn6 span:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 50%;
}
.cssBtn6:active > span {
	-webkit-animation: ring 0.45s;
	animation: ring 0.45s;
}
.cssBtn6:active > span:after {
	-webkit-animation: ring-after 0.45s;
	animation: ring-after 0.45s;
}
@-webkit-keyframes ring {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}
@keyframes ring {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}
@-webkit-keyframes ring-after {
	0% {
		background: rgba(0, 0, 0, 0.3);
	}
	100% {
		background: rgba(0, 0, 0, 0);
	}
}
@keyframes ring-after {
	0% {
		background: rgba(0, 0, 0, 0.3);
	}
	100% {
		background: rgba(0, 0, 0, 0);
	}
}

角丸にしたい場合は.cssBtn6にborder-radiusを追加して調整。

光沢が走るボタン

BUTTON

コードを見る

HTML

Copied

COPY

<a  href="#" class="cssBtn cssBtn7">BUTTON</a>

CSS

Copied

COPY

.cssBtn7{
	background-color: #576F9C;
	color:#FFF;
	position: relative;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}
.cssBtn7:before {
	content: "";
	background-color: rgba(255, 255, 255, 0.5);
	display: block;
	width: 2em;
	height: 100%;
	position: absolute;
	top: 0;
	left: -4.5em;
	transform: skewX(-45deg) translateX(0);
	transition: none;
}
.cssBtn7:hover {
	background-color: #6076a0;
	color: #fff;
}
.cssBtn7:hover:before {
	transform: skewX(-45deg) translateX(14.5em);
	transition: all 0.6s ease-in-out;
}

角丸にしたい場合は.cssBtn7にborder-radiusを追加して調整。

まとめ

多くの制作では凝ったボタンよりシンプルなデザインのボタンを使うことが多いです。
今回はその中でもよく使うボタン7つを一覧として掲載しました。
色やサイズなどを変えて役立てていただけたらと思います。

Categories: CSS