どう作成するか:テキストボタン
CSSでテキストボタンのスタイルの設定方法を学びます。
テキストボタンのスタイルの設定方法
第一步 - 添加 HTML:
<button class="btn success">成功</button> <button class="btn info">情報</button> <button class="btn warning">警告</button> <button class="btn danger">危険</button> <button class="btn default">デフォルト</button>
第2ステップ - CSSを追加:
「テキストボタン」の外観を得るために、デフォルトの背景色と枠線を削除しました:
.btn { border: none; background-color: inherit; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block; /* マウスオーバー時 */ .btn:hover {background: #eee;} .success {color: green;} .info {color: dodgerblue;} .warning {color: orange;} .danger {color: red;} .default {color: black;}
独立した背景を持つテキストボタン
マウスオーバー時の特定の背景色を持つテキストボタン:
.btn { border: none; background-color: inherit; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block; /* 绿色 */ .success { color: green; .success:hover { background-color: #04AA6D; color: white; /* 蓝色 */ .info { color: dodgerblue; .info:hover { background: #2196F3; color: white; /* 橙色 */ .warning { color: orange; .warning:hover { background: #ff9800; color: white; /* 红色 */ .danger { color: red; .danger:hover { background: #f44336; color: white; /* 灰色 */ .default { color: black; .default:hover { background: #e7e7e7;
自分で試してみる
関連ページCodeW3C.comについて