Follow up question: how to add button inside text element

[blueoaks]

I had the same question as this post where @Jade says

If you want to add a button using the html structure, you just have to make sure that you add the classes x-btn x-btn-flat x-btn-pill x-btn-regular to the link tag just like this:

<a href="#" class="x-btn x-btn-flat x-btn-pill x-btn-regular">The Button</a>

except I’d like to know where I can find a list of ALL of these button classes and what they do. I am trying to re-create a basic V2 Renew button inside a text or raw element (using html structure), including with the particles, and I am not sure how to do it.

Simply adding the above classes gives me a styled button but not one that resembles the Renew button you get when applying the renew style to a V2 button.

Is there a master list of these classes somewhere?

You can hopefully see what I am trying to do here with the “learn more” button inside the text box that is lacking the .x-interaction class on hover and is not styled like the reference V2 button below it. Since I can not simply drag the V2 button into the text box, I tried copy/paste of its html from the front end, and then added classes per Jade’s directions. But do I have to hand style it or are there classes I can add to mimic the V2 button look and interactivity?

thx.

[rad]

Hi there,

Thanks for posting in.

Those are classes generated by button shortcode, it’s only added there in case you don’t want to use a shortcode but just wish to display it as a button. That doesn’t copy the styling of your other button, instead, it will only inherit the styling of a global button from theme’s options. And it doesn’t copy the styling of v2 button styling since it has its own local styling.

Or if you wish to implement additional styling to your button, please check this https://theme.co/apex/forum/t/customizations-implementing-additional-button-colors/206. With this, you’ll just add your class name along with those existing classes.

But if you still wish to copy the button as exact as it is based from v2 button, then you may use a browser inspector and inspect the button https://developer.chrome.com/devtools, then you’ll see class and style attribute, simply copy them and use to your HTML link.

Example,

<a href="#" class="x-btn x-btn-flat" style="color:#fff" >A text</a>

Thanks!