Trying to style button but it's still inheriting default style

[Nik Majdan]

I am trying to style my buttons using CSS but it still shows the default button style insidethe stylized button. Here is my code:

Relevant CSS:

#hcontainer .button, #vcontainer .button {

display: inline-block !important;

padding: 0.46em 1.6em;

border: 0.1em solid #000000;

margin: 0.5em 0.2em 0.2em 0;

border-radius: 0.12em;

box-sizing: border-box;

text-decoration: none;

font-weight: bold;

color: #000000;

text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);

background-color: #0085cf;

transition: all 0.15s;

width: fit-content;

text-align: center;

}

 

#vcontainer .button:hover{

text-shadow: 0 0 2em rgba(255,255,255,1);

color:#FFFFFF;

border-color:#FFFFFF;

}HTML:

 

 

 

--Reset filters

 

As you can see in the attachment, the CSS styling is there (black border, blue background, etc). But, the original Spotfire styling is also still there (gray box around text). How do I get rid of this styling

[Nik Majdan]

Ok, figured it out myself. I was creating a button when I should have been creating a link. I didn't realize I could create a link (using the Control Type dropdown on the Actional Control screen) that reset filters just like a button. Then, I just changed my styling to affect links (i.e. `#vcontainer .button a{ color: white; }`).