Bouton de style désactivé avec CSS

J'essaie de changer le style d'un bouton avec une image incorporée comme on le voit dans le violon suivant:

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

Dans l'exemple, il n'y a pas d'images, je le crains.

J'essaye de:

1. Changer le background-colorbouton quand il est désactivé
2. Changer l'image dans le bouton lorsqu'il est désactivé
3. Désactivez l'effet de survol lorsqu'il est désactivé
4. Lorsque vous cliquez sur l'image dans le bouton et que vous la faites glisser, l'image peut être vue séparément; Je veux éviter ça
5. Le texte sur le bouton peut être sélectionné. Je veux aussi éviter cela.

J'ai essayé de faire button[disabled]. Mais certains effets n'ont pas pu être désactivés. comme top: 1px; position: relative;et l'image.

Pour les boutons désactivés, vous pouvez utiliser le :disabledpseudo-élément. Cela fonctionne pour tous les éléments.

Pour les navigateurs / appareils prenant en charge CSS2 uniquement, vous pouvez utiliser le [disabled]sélecteur.

Comme pour l'image, ne mettez pas d'image dans le bouton. Utilisez CSS background-imageavec background-positionet background-repeat. De cette façon, le glissement de l'image ne se produira pas.

Problème de sélection: voici un lien vers la question spécifique:

• Comment désactiver la surbrillance de la sélection de texte?

Exemple pour le sélecteur désactivé:

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>

Je pense que vous devriez pouvoir sélectionner un bouton désactivé en utilisant ce qui suit:

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

Ajoutez le code ci-dessous dans votre page. Faites-moi confiance, aucune modification n'a été apportée aux événements de bouton, pour désactiver / activer le bouton, ajoutez / supprimez simplement la classe de bouton en Javascript.

Méthode 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éthode 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>

Pour appliquer le bouton CSS gris à un bouton désactivé.

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;
}

Par CSS:

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

Vous pouvez ajouter n'importe quelle décoration à ce bouton. Pour changer le statut, vous pouvez utiliser jquery

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

Pour nous tous qui utilisons le bootstrap, vous pouvez changer le style en ajoutant la classe "désactivé" et en utilisant ce qui suit:

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;
}

N'oubliez pas que l'ajout de la classe "désactivé" ne désactive pas nécessairement le bouton, par exemple dans un formulaire de soumission. Pour désactiver son comportement, utilisez la propriété disabled:

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

Un violon de travail avec quelques exemples est disponible ici .

Lorsque votre bouton est désactivé, il définit directement l'opacité. Donc, tout d'abord, nous devons définir son opacité comme

.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...
}

envisager la solution suivante

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

Et si vous passez à scss, utilisez:

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

Besoin d'appliquer CSS comme ci-dessous:

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