Hover and Disabled at the same time

Question

I have 2 buttons. I want one to be disabled and the other to be in effect Hover. When I do so below the two buttons are with effect.

How do I make the button that is disabled have no effect?

.btn-destaque{
    padding: 25px 15px 25px 15px;
    background-color: #7857a5;
    color: white;
    border: 1px solid #8c37ff;
}
.btn-destaque:disabled{
    background-color: #b3a4c7;
    cursor: not-allowed;
    border: 1px solid #b3a4c7;
}
.btn-destaque:hover{
    background-color: #8c37ff;
}

<button type="button" class="btn-destaque disabled" disabled="disabled">Teste</button>
<button type="button" class="btn-destaque">Teste</button>

Answer 1

You can use the :not(:disabled) in the CSS.

.btn-destaque {
    padding: 25px 15px 25px 15px;
    background-color: #7857a5;
    color: white;
    border: 1px solid #8c37ff;
}

.btn-destaque:disabled {
    background-color: #b3a4c7;
    cursor: not-allowed;
    border: 1px solid #b3a4c7;
}

.btn-destaque:not(:disabled):hover {
    background-color: #8c37ff;
}

<button type="button" class="btn-destaque disabled" disabled="disabled">Teste</button>
<button type="button" class="btn-destaque">Teste</button>

Answer 2

You can use the not() to apply Hover only to elements that have the class .btn-destaque which do not have the attribute disabled:

.btn-destaque {
  padding: 25px 15px 25px 15px;
  background-color: #7857a5;
  color: white;
  border: 1px solid #8c37ff;
}

.btn-destaque:disabled {
  background-color: #b3a4c7;
  cursor: not-allowed;
  border: 1px solid #b3a4c7;
}

.btn-destaque:not([disabled]):hover {
  background-color: #8c37ff;
}

<button type="button" class="btn-destaque disabled" disabled="disabled">Teste</button>
<button type="button" class="btn-destaque">Teste</button>