Change CSS for Call To Action Button

Could you please post a link to your site so I can see if there’s a suitable selector to put in your child theme’s stylesheet?

As it is I don’t know what to look for and how you want to change the action button.

Thanks for the reply, here is a link to the current site – link

Hi, the CSS applied to the call to action button, which I gather is the red button saying Contact us, is:

For the div containing the button:

.origin-widget.origin-widget-call-to-action-simple-vantage_flat_dark .origin-widget-button {
    display: block;
    margin-top: -22px;
    position: absolute;
    right: 2em;
    top: 50%;
}

For the anchor tag, that is, the link itself, is:

.origin-widget.origin-widget-button-vantage_flat-red a {
    background: -moz-linear-gradient(center bottom , #D90018 0%, #DD051A 100%) repeat scroll 0 0     rgba(0, 0, 0, 0);
    border-bottom: 2px solid #C10006;
    border-radius: 4px;
    color: #FFFDD9;
    display: inline-block;
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    padding: 11px 45px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 #BA0001;
}

Depending on what you need to change, your modifications have to take place here.

Thanks again for the reply.

What I want to change is the colour of the red button to the same red as I am using for the rest of the site, the problem is i’m not sure what file to edit.

In the control panel for the CTA Button, there is a list of colour options, so depending on what colour is used, the appropriate CSS is applied – to where you pointed out – but the CSS must be being pulled in from a file, which I can’t find.

It looks like the theme’s using an option panel, therefore the color is being applied dynamically as inline styles (not from a predefined CSS file). Do you choose the color of the button via a color picker in the admin panel?

No, no colour picker, just a dropdown list.

Would be nice to be able to change the colour of that button.

Thanks for your help antonietta.

What’s the name of the section in the admin panel where the dropdown is displayed? Which other options do you have in the same section?

I have attached a screenshot of what the other options are for Button Style.

The section where these options are is in Appearance –> Home Page

I’ve gone through the vantage theme and I think I’ve found the file where the CSS is being produced. It’s ..extras/panels-lite/panels-lite.php

However, I can’t find anything related to the CTA button as you show in the screenshot. There is the possibility that the code is coming from the page builder plugin that you must be using in your site. I need to download this plugin and explore its code.

Oh, sorry I didn’t mention – I did upgrade and am using the premium version – sorry should have mentioned that.

I’ll continue looking and see if I can find where those styles are being added.

As I thought there are some preset styles in the plugin for call to action: siteorigin-panels/widgets/widgets/call-to-action. However, because the names in the dropdown are prefixed by vantage, I think these are styles added by the vantage theme in its premium version. Try the panels in the extras folder of your premium version of vantage.

Hi,
I need to make the font larger and the font colour brighter on our call to action buttons on our new website that I am building.
I tried using the code you listed above, but it doesn’t make the change.

We are using Virtue Premium. Are you able to help me out?

Thank you.

Hi Mdenn,

The premium version of this theme is not available to me on this repository, furthermore, this forum is only for free themes listed on this repository. This means that unfortunately I can’t help you here.

Try getting in touch with the developer.

Okay, thank you.