CSSでbuttonをいい感じにデザインしてみる

こんにちは!増田拓海です。

今回はCSSでbuttonのデザインをいい感じにする方法を紹介していきたいと思います。

今回使うコード

<html>
<head>
<style>
.button{
	border:  none;
	border-radius: 3px;
	background-color: white;
	color: black;
	padding: 0.3em 1em;
	width: 150px;
	height: 50px;
	box-sizing:border-box;
	font-size: 19px;
	transition: .4s;
}
.button:hover{
	background-color: #FCCC04;
	color: white;
	transition: .4s;
}
</style>
</head>
<body>
<button class="button">Check!</button>
</body>
</html>

今回紹介する方法の完成形はこんな感じです。

CSSの部分について上から解説していきます。

.button

border

border:none;

ここでは、ボーダー(周りを囲っている線)を消しています。

別の値を入れることで色を変えたり線の種類・太さを変える事もできます。

border-radius

border-radius:3px;

ここでは、ボーダーの角を丸くしています。

3pxを別の値にすれば更に丸くできます。

background-color・color

バックカラーと文字色を変更しています。

padding

ボタンの中の文字とボーダーの間をどのくらい空けるかを指定しています。

width・height

横幅・縦幅を指定しています。

box-sizing

これは縦幅、横幅の指定方法を指定するプロパティです。

box-sizing:border-box;

これでwidth・heightの値に合わせるようになります。

content-boxを指定するとwidth・heightの値は無視されます。


font-size

ボタン内のフォントサイズを指定しています。

transition

アニメーションの実行時間です。

ホバー(マウスが乗っかっている時)時にエフェクトを掛けているのでその実行時間です。

指定するといい感じに変わります。(語彙力)

.button:hover

これで、マウスが乗っかった時のデザインを指定しています。

background-color

背景色を変えています。

color

背景色が白からオレンジになったので文字色も変えています。

まとめ

こんな感じでボタンをデザインできます。

サイトに合わせて値が変更できるようにプロパティの解説も入れてみたので参考になれば嬉しいです。

最後まで読んでいただきありがとうございました!!!

増田拓海

増田拓海という名前で活動している中学生です。 現在、個人のプロダクトでThinkShareというWebサービスを開発・運営しております。 書ける言語はPython,JavaScript,Go(勉強中)です。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントする

日本語が含まれない投稿は無視されますのでご注意ください。