Jump to content

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

Nik Majdan

Recommended Posts

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







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

Link to comment
Share on other sites

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; }`).
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...