ボタンサンプル集
基本ボタンのCSS実装例。コピー&ペーストで簡単に実装できます。
アラートサンプル
デモ
HTMLコード
<button class="btn btn-primary">プライマリ</button>
<button class="btn btn-secondary">セカンダリ</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危険</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">情報</button>
<button class="btn btn-light">ライト</button>
<button class="btn btn-dark">ダーク</button>CSSコード
/* 基本ボタンスタイル */
.btn {
display: inline-block;
padding: 8px 16px;
margin: 4px;
text-align: center;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
}
.btn:hover {
text-decoration: none;
opacity: 0.8;
}
/* プライマリボタン */
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
/* セカンダリボタン */
.btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
/* 成功ボタン */
.btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
/* 危険ボタン */
.btn-danger {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}
/* 警告ボタン */
.btn-warning {
color: #41464b;
background-color: #ffc107;
border-color: #ffc107;
}
/* 情報ボタン */
.btn-info {
color: #fff;
background-color: #17a2b8;
border-color: #17a2b8;
}
/* ライトボタン */
.btn-light {
color: #41464b;
background-color: #f8f9fa;
border-color: #dddddd;
}
/* ダークボタン */
.btn-dark {
color: #fff;
background-color: #343a40;
border-color: #343a40;
}オンラインで試してみませんか？
コードエディターでリアルタイムに編集・プレビューできます。
関連サンプル
このサンプルを理解するための関連レッスン
このボタンサンプルをより深く理解するために、以下のレッスンを学習することをお勧めします。