Docs

[Scott M]

hey folks!

Wondering about single button CSS when placing the code in the style section of a ONE particular button.

It seems the code below works to change a single button, but what about changing the CSS hover options for the same button?
Thanks!

color: red; background-color: white;

[Joao]

Hi Scott

Please follow this example

.yourbuttonclass:hover {

color: red; background-color: white;

}

* You have to keep one version of the code without :hover for the standar non hovered version and also add this version for the hovered version.

Hope that helps,

Joao

[Scott M]

thanks, but it looks like you gave me the code that goes into the custom CSS section from the settings tab. I’m looking for the style CSS that gets pasted in the style section of one particular button.

I would like to modify the hover and non hover options, all for one button, from that ONE SPECIFIC PLACE.

http://screencast.com/t/JhSQLeapAw

thanks

[John Ezra]

Hi Scott,

Thanks for updating the thread! Unfortunately, it isn’t possible to edit hover states in inline CSS, which is what the style field is for. You will need to give your element a class name and use that class as the selector for your CSS. The hover CSS provided above should go into the custom CSS section or in the customizer. Don’t forget to change and make sure your class name/selector matches.

Hope this helps clarify – thanks!

[Scott M]

hmmmm ok thanks.

I’m no good with custom class css

Do you mind showing the exact steps to affect one single button? I tried a few variations but I am not seeing any changes.

I looked around online and in the forum but I didn’t see much for buttons. I have transparent button code and regular button code working on the same page as well sooo.

thanks

[Rupok]

Hi there,

I think adding a class and then adding some CSS for that class is pretty straightforward. There is no need of any step by step procedure as there are only two steps. Let’s follow this – https://community.theme.co/kb/implementing-additional-button-colors/

Hope this helps.

[Scott M]

hi, yes I have read that article. It doesn’t give specifics. The code below is in the custom CSS section for the page. I then clicked on a button and put “my-btn” in the class field. The button settings are set to global. What am I missing? a period or something?

.my-btn: {  
  text-transform: none;
  padding: 3.4em .0em 1em;
  min-height: 20px;
  color: #ffffff;
  border-color: #ffffff;
  background-color: clear;
  border-width:4px;
  font-size: 38px;
}

[Rahul]

It should be :

.my-btn {  
  text-transform: none;
  padding: 3.4em .0em 1em;
  min-height: 20px;
  color: #ffffff;
  border-color: #ffffff;
  background-color: clear;
  border-width:4px;
  font-size: 38px;
}

Hope this helps

[Scott M]

yep sweet thanks!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts