Applying Custom CSS to SS class in "Custom CSS"?

Site URL: https://www.studiovulcan.com/

Hey there!

So I'm looking to apply a custom CSS to a SS class. When I apply this to my OWN class (via a code block) it works just fine. When I then change that class from my own specified class to a SS class, the CSS then doesn't work.
I've tried adding "!important" after the effects just to see if SS is trying to overwrite it but it still doesn't work. The class I'm trying to apply to is the button, however the buttons have two classes. I wonder if this is the issue?


As you can see below, when I change ".button" to "sqs-block-button-element--medium" or "sqs-block-button-element", the changes revert and don't work. Ideas?

EDIT: You can see on my website the working versus non-working button. The first button is a code block, the 2nd is a SS button.

.button{
  font-family: ff-good-headline-web-pro-condensed;
letter-spacing: .1em;
  line-height: 120%;
  font-weight: 600;
  text-transform: uppercase;
  border-color: #f1c40f;
  border-width: 3px;
  color: #f1c40f;
  background-image: -webkit-linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
  padding-top:12px;
  padding-bottom:12px;
  padding-right: 35px;
  padding-left: 35px;
  border-radius: 8px;
}
.button:hover {
  background-position: 0;
  color:#0F0E0F;
  padding-top:15px;
  padding-bottom:15px;
}

Try this and let me know if it works. It worked on the front end so it should work in the Custom CSS editor as well.

EDIT: Updated to use the styles you posted above so you can just copy-paste.

.sqs-block-button .sqs-block-button-element--medium.sqs-block-button-element {
  font-family: ff-good-headline-web-pro-condensed;
  letter-spacing: .1em;
  line-height: 120%;
  font-weight: 600;
  text-transform: uppercase;
  border-color: #f1c40f;
  border-width: 3px;
  color: #f1c40f;
  background-image: -webkit-linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
  padding-top:12px;
  padding-bottom:12px;
  padding-right: 35px;
  padding-left: 35px;
  border-radius: 8px;
}
.sqs-block-button .sqs-block-button-element--medium.sqs-block-button-element:hover {
  background-position: 0;
  color:#0F0E0F;
  padding-top:15px;
  padding-bottom:15px;
  opacity: 1;
}

1 hour ago, whitewolf said:

Try this and let me know if it works. It worked on the front end so it should work in the Custom CSS editor as well.

EDIT: Updated to use the styles you posted above so you can just copy-paste.

.sqs-block-button .sqs-block-button-element--medium.sqs-block-button-element {
  font-family: ff-good-headline-web-pro-condensed;
  letter-spacing: .1em;
  line-height: 120%;
  font-weight: 600;
  text-transform: uppercase;
  border-color: #f1c40f;
  border-width: 3px;
  color: #f1c40f;
  background-image: -webkit-linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
  padding-top:12px;
  padding-bottom:12px;
  padding-right: 35px;
  padding-left: 35px;
  border-radius: 8px;
}
.sqs-block-button .sqs-block-button-element--medium.sqs-block-button-element:hover {
  background-position: 0;
  color:#0F0E0F;
  padding-top:15px;
  padding-bottom:15px;
}

 

Funnily enough I eventually found it without even looking for the answer. Stumbled upon a css tricks video for SS from someone random haha.

MY ONLY issue now is that when I hover, the color is faded.. I'm not sure why. It's either the color is somehow duller, or the button is transparent by 10%... Idk what's going on but when I coded this to a code block, the hover worked perfect with a vibrant yellow of my choosing, the same code works 90% except for the hover just looking dull...

21 hours ago, StudioVulcan said:

he same code works 90% except for the hover just looking dull...

On your hover selector add an 

opacity: 1;

SS button hovers typically will fade the opacity on hover. I think I forgot to add that in the code I shared before but I'll update that post for other's future reference.