こんにちは！増田拓海です。
今回は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
背景色が白からオレンジになったので文字色も変えています。
まとめ
こんな感じでボタンをデザインできます。
サイトに合わせて値が変更できるようにプロパティの解説も入れてみたので参考になれば嬉しいです。
最後まで読んでいただきありがとうございました！！！
コメント