input button の装飾

フォームの送信ボタンを目立つように表示する方法として、CSSを利用して装飾する方法があります。次のCSSの設定は、id=”reserved-change-btn” と設定された input タグを装飾する例です。

/* 予約のキャンセル */
#reserved-change-btn {
    /* サイズの指定 */
    padding: 15px 30px;      /* 内側の余白（上下、左右）で大きくする */
    font-size: 20px;        /* 文字を大きくする */
    width: 100%;             /* 親要素の幅いっぱいに広げる場合 */
    max-width: 300px;        /* 巨大になりすぎるのを防ぐ */
    /* デザインの調整 */
    background-color: #007bff; /* ボタンの色 */
    color: white;            /* 文字の色 */
    border: none;            /* 枠線を消す */
    border-radius: 5px;      /* 角を丸くする */
    cursor: pointer;         /* マウスホバー時にポインタにする */
}

/* ホバー時の効果(無効時は適用されない) */
#reserved-change-btn:not(:disabled):hover {
    background-color: #0056b3;
}

/* disabled時のスタイル */
#reserved-change-btn:disabled {
    background-color: #ccc;    /* グレー背景 */
    color: #666;              /* グレー文字 */
    cursor: not-allowed;      /* 禁止カーソル */
    opacity: 0.7;             /* 少し透明にする */
}

上記設定でボタンを表示すると

が、次のようになります。