web-dev-qa-db-ja.com

ボタンが無効に見えるようにする方法

うまくいけば、これはここではあまり特定されていません。私のサイトで使用している次のボタン画像があります

enter image description here

これがテキストの例です：

enter image description here

これは、次のCSSを使用してレンダリングされます。

input.borderlessButton {
    background: url("../Images/button.png") no-repeat scroll 0 0
}

HTMLでは無効になっています

<input type="submit" disabled/>

画像は変更されないため、これは明らかに外観を変更しません。 CSSを追加できます:disabled疑似クラス。

しかし、上のボタンを無効にするには、どうすればよいでしょうか。

すべての提案を歓迎します。

buttonsimage
10
user40113

私はさまざまなオプションがあると思います：

  • グレースケールにします（有効なボタンがカラフルな場合）
  • 明るくするか、透明な白いオーバーレイをその上に置きます（有効なボタンが通常暗い場合）
  • 平らにする（有効化ボタンに3Dの種類の表面がある場合）
  • ボタンをホバーするときにボタンを強調表示しません（有効なボタンにはその動作があります）

または組み合わせを使用します。ここでインスピレーションを得てください： http://designmodo.github.io/Flat-UI/

11
Bart Gijssens

不透明度を利用して、ボタンを無効にするようにします。

button.buttonClassName:disabled {
    opacity: 0.3;
}

ボタンがstackoverflowに貼り付けられた例と、Firebugで不透明度が変更された同じボタンが無効なボタンとして表示される例。

通常（不透明度：1）：
enter image description here
無効（不透明度：0.3）：
enter image description here

6
wadjakman