Window Controls have mixed themes

So yesterday I started messing around with my own gtk theme or well just modifying really. I use the Dracula Theme but wanted my maximize button to appear purple as I saw it in another theme and thought it looked real good. I have the svgs changed over and my own code in /.config/gtk-3.0/gtk.css but when I have a window out of focus and hover over the maximize button it still does the animation while the others do not. I have done a lot of looking and can't seem to see how its being done. Is there a class I am missing?

gtk.css:

.selection-mode.titlebar .titlebutton.maximize,
.titlebar .titlebutton.maximize {
   color: transparent;
    border: none;
    box-shadow: none;
    background-position: center;
    background-repeat: no-repeat;
    background-image: -gtk-scaled(url("customTheme/assets/maximize.svg"));
}

.selection-mode.titlebar .titlebutton.maximize:backdrop,
.titlebar .titlebutton.maximize:backdrop {
    background-image: -gtk-scaled(url("customTheme/assets/maximize_unfocused.png"));
    color: transparent;
}

.selection-mode.titlebar .titlebutton.maximize:hover,
.selection-mode.titlebar .titlebutton.maximize:active,
.selection-mode.titlebar .titlebutton.maximize:checked,
.titlebar .titlebutton.maximize:hover,
.titlebar .titlebutton.maximize:active,
.titlebar .titlebutton.maximize:checked  {
    color: transparent;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-image: -gtk-scaled(url("customTheme/assets/maximize_prelight.svg"));
}