Button Shortcode

Support
#1

Hi,

I have used the following shortcode to have a button in the content area but it applies the site default colour to that button. How could I have a custom colour?

Shortcode: [button type="transparent" shape="pill" size="large" href="/web-services/" title="Web Services"][icon type="arrow-right"]Find Out Here[/button]

If you could check this URL footer you’ll see in the 1st footer there’s a button. I would like to have it like that footer button.

Thoughts?

Thanks in advance

#2

Hi there,

You can write some custom CSS to style the specific button. You can do it by adding a class to the button and targeting that button through the class like this:

[button class="white" type="transparent" shape="pill" size="large" href="/web-services/" title="Web Services"][icon type="arrow-right"]Find Out Here[/button]

.white {
    background-color: #fff;
    border-color: #fff;
}

Hope this gives you an idea.

#3

Thanks. But when hovering on that how can fill that like the button below in the footer?

#4

Hi there,

You will have to add the :hover selector for the class you created like this:

.white:hover {
    background-color: #efefef !important;
}

Hope this helps.

#5

Thank you!

#6

You’re most welcome.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.