CSS Specificity Issue

.btn-default:not(.btn-hover-nobg):not(.icon-animated):not(.btn-flat):hover

### What's happening:
This selector is **more specific** than a simple `.btn-default:hover`, so if both exist, the one with higher specificity will apply.

### Example:

/* This has lower specificity */
.btn-default:hover {
  background-color: blue;
}

/* This has higher specificity */
.btn-default:not(.btn-hover-nobg):not(.icon-animated):not(.btn-flat):hover {
  background-color: red;
}

In this case, when hovering over a `.btn-default` **that does not** have `.btn-hover-nobg`, `.icon-animated`, or `.btn-flat` classes, the `red` background will win.

—

### How to fix:
If you want to **override** the specific rule, you have a few options:

#### 1. Match or beat the specificity:

.btn-default:not(.btn-hover-nobg):not(.icon-animated):not(.btn-flat):hover {
  background-color: blue !important;
}

Or add extra specificity (not always recommended):

body .btn-default:hover {
  background-color: blue;
}

#### 2. Modify the original CSS:
If you have control over the original CSS, you can change or remove the conflicting rule to allow a simpler `.btn-default:hover` to work universally.

#### 3. Add an exception class:
Add `.btn-hover-nobg` or one of the other excluded classes if you want to avoid the stronger rule:

<button class="btn-default btn-hover-nobg">Click me</button>

That will **opt out** of the more specific rule.

—

Let me know if you'd like help inspecting specific behavior or need to override it for a certain design!