Estilo desativado botão com CSS

Estou tentando alterar o estilo de um botão com uma imagem incorporada, como visto no Fiddle a seguir:

http://jsfiddle.net/krishnathota/xzBaZ/1/

No exemplo, não há imagens, receio.

Eu estou tentando:

1. Altere o background-colorbotão quando estiver desativado
2. Alterar a imagem no botão quando estiver desativado
3. Desativar o efeito de foco quando desativado
4. Quando você clica na imagem no botão e a arrasta, a imagem pode ser vista separadamente; Eu quero evitar isso
5. O texto no botão pode ser selecionado. Também quero evitar isso.

Eu tentei entrar button[disabled]. Mas alguns efeitos não puderam ser desativados. gosto top: 1px; position: relative;e imagem.

Para os botões desativados, você pode usar o :disabledpseudoelemento. Funciona para todos os elementos.

Para navegadores / dispositivos que suportam apenas CSS2, você pode usar o [disabled]seletor.

Como na imagem, não coloque uma imagem no botão. Use CSS background-imagecom background-positione background-repeat. Dessa forma, a imagem arrastada não ocorrerá.

Problema de seleção: aqui está um link para a pergunta específica:

• Como desativar o destaque da seleção de texto?

Exemplo para o seletor desativado:

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

Eu acho que você deve poder selecionar um botão desativado usando o seguinte:

button[disabled=disabled], button:disabled {
    // your css rules
}

Adicione o código abaixo em sua página. Confie em mim, nenhuma alteração foi feita nos eventos do botão, para desativar / ativar o botão basta adicionar / remover a classe de botão em Javascript.

Método 1

 <asp Button ID="btnSave" CssClass="disabledContent" runat="server" />

<style type="text/css">
    .disabledContent 
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }

    .disabledContent > * 
    {
        pointer-events:none;
    }
</style>

Método 2

<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />

<style type="text/css">
    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }
</style>

Para aplicar o botão cinza CSS a um botão desativado.

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
}

Por CSS:

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

Eles podem adicionar qualquer decoração a esse botão. Para alterar o status, você pode usar o jquery

$("#id").toggleClass('disable');

Para todos nós usando o bootstrap, você pode alterar o estilo adicionando a classe "disabled" e usando o seguinte:

HTML

<button type="button"class="btn disabled">Text</button>

CSS

.btn:disabled,
.btn.disabled{
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}

Lembre-se de que adicionar a classe "disabled" não necessariamente desativa o botão, por exemplo, em um formulário de envio. Para desativar seu comportamento, use a propriedade disabled:

<button type="button"class="btn disabled" disabled="disabled">Text</button>

Um violino de trabalho com alguns exemplos está disponível aqui .

Quando o botão está desativado, ele define diretamente a opacidade. Então, primeiro de tudo, temos que definir sua opacidade como

.v-button{
    opacity:1;    
}

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}

considere a seguinte solução

.disable-button{ 
  pointer-events: none; 
  background-color: #edf1f2;
}

E se você mudar para scss, use:

button {
  backgroud-color: #007700
  &:disabled {
    backgroud-color: #cccccc
  }
}

Precisa aplicar css como a seguir:

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }