2018.06.28

【CSS】いろいろなボタンを作ってみよう

目次

ボタンの基本的な作り方

まずはボタンを作るときによく使われるプロパティを下に示しておきます(widthやheight、border-radiusなどは適宜調整してください)。

display: block;
width: 150px;
height: 40px;
text-decoration: none;
text-align: center;
line-height: 40px;
border-radius: 5px;

ボタンは基本的にaタグで作っていきます。aタグはインライン要素なので、widthやheightが指定できないため、display: block;としてブロック要素に変換しています。text-decoration: none;で下線を消し、text-alignとline-heightで文字を中央に寄せています。また、border-radiusで角を丸くしていますが、デザインによっては丸くしないのもありでしょう。

いろいろなボタン

下に紹介するボタンは、すべて上に示したコードを使っています。

シンプル

BUTTON

background-color: gray;
color: white;

グラデーションを付けてみる

BUTTON

background: linear-gradient(to top right, #2ECCFA, #642EFE, #CC2EFA);
color: #F2F2F2;

ホバー時に反転させる

BUTTON

a {
	border: 1px solid gray;
	color: gray;
}

a:hover {
	background-color: gray;
	color: white;
}

クリックするとへこむ

BUTTON

a {
	background-color: #31B404;
	color: white;
	box-shadow: 0 4px #0B6121;
}

a:active {
	position: relative;
	top: 4px;
	box-shadow: none;
}

疑似クラス:activeを使えば、要素をクリックしたときのCSSを指定できます。この例では、デフォルトでbox-shadowを指定して、クリックしたときにpositionでボタンの位置を下にずらし、影を消すことで、ボタンをクリックしたときにへこんで見えるようになっています。

影を付けて立体感を出す

BUTTON

background: linear-gradient(to top right, #2ECCFA, #642EFE, #CC2EFA);
color: #F2F2F2;
box-shadow: 2px 2px 3px gray;

home

scroll