CSS - ボタンの総合ガイド - 初心者向け
こんにちは、Web開発者の卵さんたち！今日は、CSSボタンの素晴らしい世界に飛び込みます。このチュートリアルの終わりまでに、機能的で見栄えのするボタンを作成できるようになるでしょう。では、始めましょう！
CSS ボタン - 基本例
まずはシンプルなボタンから始めましょう。必要なHTMLとCSSは以下の通りです：
<button class="basic-button">クリックしてね！</button>.basic-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}これで緑色のボタンと白いテキストが作成されます。paddingプロパティでサイズを調整し、cursor: pointerでボタンにカーソルを合わせたときに手の形に変更します。
CSS ボタンの色
ボタンの色は何色にでもできます！異なる色のボタンを作成する方法を以下に示します：
<button class="blue-button">青</button>
<button class="red-button">赤</button>
<button class="yellow-button">黄</button>.blue-button {background-color: #008CBA;}
.red-button {background-color: #f44336;}
.yellow-button {
background-color: #ffeb3b;
color: black;
}黄ボタンには黒いテキストを使用して読みやすさを確保しています。
CSS ボタンのサイズ
font-sizeとpaddingを調整することで、異なるサイズのボタンを簡単に作成できます：
<button class="small-button">小</button>
<button class="medium-button">中</button>
<button class="large-button">大</button>.small-button {
font-size: 12px;
padding: 10px 24px;
}
.medium-button {
font-size: 16px;
padding: 12px 28px;
}
.large-button {
font-size: 20px;
padding: 14px 40px;
}CSS ボタンのパディング
パディングはボタンのサイズに非常に重要です。異なるパディング値で実験してみましょう：
<button class="padding-button1">ボタン1</button>
<button class="padding-button2">ボタン2</button>.padding-button1 {
padding: 10px 20px;
}
.padding-button2 {
padding: 15px 40px;
}最初の値は上下のパディング、二番目の値は左右のパディングです。
CSS 角丸いボタン
鋭い角を柔らかくしたい場合は、border-radiusを使用します：
<button class="rounded-button">角丸い</button>.rounded-button {
border-radius: 12px;
}異なる値で試して、望む丸みを得ましょう！
CSS 色付きボタン边框
ボタンに边框を追加してみましょう：
<button class="border-button">边框付き</button>.border-button {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}これで白いボタンに緑色の边框と黒いテキストが作成されます。
CSS ホバー可能なボタン
インタラクティブ性は鍵です！ボタンをホバーで変更してみましょう：
<button class="hover-button">ホバーしてね</button>.hover-button {
background-color: white;
color: black;
border: 2px solid #008CBA;
transition: 0.3s;
}
.hover-button:hover {
background-color: #008CBA;
color: white;
}transitionプロパティでスムーズな色の変更を確保します。
CSS 影付きボタン
ボタンに深みを加えるために影を使用します：
<button class="shadow-button">影</button>.shadow-button {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}box-shadowプロパティで影効果を追加します。
CSS 非活性ボタン
時々、ボタンを非活性にする必要があります：
<button class="disabled-button" disabled>非活性</button>.disabled-button {
opacity: 0.6;
cursor: not-allowed;
}opacityプロパティでボタンをぼやけさせ、cursor: not-allowedでカーソルを変更してボタンがクリックできないことを示します。
CSS ボタンの幅
ボタンの幅はパーセンテージまたは固定値で調整できます：
<button class="full-width">全幅</button>
<button class="half-width">半分幅</button>.full-width {
width: 100%;
}
.half-width {
width: 50%;
}CSS ボタン群
ボタンをグループ化して統一した見た目にします：
<div class="button-group">
<button>左</button>
<button>中央</button>
<button>右</button>
</div>.button-group button {
float: left;
}
.button-group button:not(:last-child) {
border-right: none;
}これで水平に並んだボタン群が作成されます。
CSS 边框付きボタン群
ボタン群に边框を追加します：
<div class="border-button-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>.border-button-group button {
border: 1px solid green;
float: left;
}
.border-button-group button:not(:last-child) {
border-right: none;
}CSS 垂直ボタン群
垂直に並んだボタン群も作成できます：
<div class="vertical-button-group">
<button>上</button>
<button>中央</button>
<button>下</button>
</div>.vertical-button-group button {
display: block;
width: 100%;
}
.vertical-button-group button:not(:last-child) {
border-bottom: none;
}CSS 画像上のボタン
画像上にボタンを配置して目立つ効果を作成します：
<div class="container">
<img src="image.jpg" alt="画像">
<button class="btn">ボタン</button>
</div>.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}CSS アニメーションボタン
ボタンにアニメーションを追加してみましょう：
<button class="animated-button">アニメーション</button>@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.animated-button {
animation: pulse 2s infinite;
}これでボタンにパルス効果が作成されます。
CSS ボタンの押し下げ効果
ボタンの押し下げ効果を模倣します：
<button class="press-button">押してね</button>.press-button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}クリックされたときにボタンが下に動くように見えます。
CSS ボタンのフェードイン効果
ボタンにフェードイン効果を作成します：
<button class="fade-in-button">フェードイン</button>@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-button {
animation: fadeIn 2s;
}このボタンはページが読み込まれたときにフェードインします。
CSS ボタンのリップル効果
最後に、リップル効果を作成しましょう：
<button class="ripple">リップル</button>.ripple {
position: relative;
overflow: hidden;
}
.ripple:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.ripple:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}クリックされたときにリップル効果が作成されます。
そして、それで終わりです！さまざまなCSSボタンを作成するための知識を身につけました。実践が完璧を生むことを忘れずに、これらのスタイルを試してみて、自分だけのユニークなボタンを作成してください。ハッピーコーディング！
Credits: Image by storyset