Creating another call to action button on my page

Hi, I’ve got an issue I’m really struggling with and can’t find an answer to.

I’ve got ‘call to action’ buttons on my site that don’t sit within the header slider, they sit further down the page and will link to other sections in the site. The thing is, I’d like them to have the same style as the button within the header slider.

At the moment these additional buttons are brought in using a ‘SiteOrigin button’ widget, which is why I suspect they look different.

How can I get all the buttons across my site to look the same?

Here’s a URL:
http://newsite.advswimschool.co.uk/
The buttons are within the ‘lessons’ section and the ‘get in touch’ section.

Thank you SO much for any advice you can give.

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .ow-button-base > a {
      background-color: #009BD9;
      border-color: #009BD9;
      color: #ffffff;
      font-size: 13px;
      line-height: 24px;
      font-weight: 700;
      padding: 12px 35px;
      text-transform: uppercase;
      border-radius: 3px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
    }

    .ow-button-base > a:hover {
      background-color: #444444;
      border-color: #444444;
      color: #FFFFFF;
    }

Regards,
Kharis

Hi Kharis

Thanks for the speedy reply! I’ve added that code, but nothing has changed. The buttons below the ‘Lessons we offer’ area still looks different from the header slider button.

Is there not a Sydney widget that replicates the same button style across the site? I can’t help wondering if I’m making this more complicated than it needs to be?

OH HANG ON!

I think I might have partly solved this! I’ve used a Sydney Call-to-action widget instead, which seems to have worked.

Now I just need to figure out how to make the colours the same as my header slider button, at the moment they seem to be reversed.

Dear Kharis

So I’ve partly solved this problem by using a ‘Sydney FP: Call to action’ widget. However, the colours are different from my CTA in the header slider.

So how can I make the colours the same across both buttons, as well as the button in the form at the bottom of the page?

Thank you for your help. It’s much appreciated.

Try this custom CSS code:

    .roll-promobox .roll-button {
      background-color: #009BD9;
      border-color: #009BD9;
      color: #fff;
    }

    .roll-promobox .roll-button:hover {
      background-color: #444444;
      border-color: #444444;
      color: #FFFFFF;
    }      

Add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

Hi Kharis

Thank you for this, that CSS code worked perfectly!

I have another question, how can I change the colours of the buttons in my Site Origin forms? At the moment I have them selected to be the same colour as the theme - however I want to tweak them so that they work on a blue background colour.

I thought I’d found the bit of code to help me (by looking at the developer tools in Chrome) and I found the code that references the button elements, “sow-submit”. But then I was at a bit of a loss as to what to do with this to actually change my button colours!

Can you help again? Apologies for asking again!

Thanks

Hello there,

For form’s button, you could use this code:

    .sow-submit-wrapper input[type="submit"] {
      background-color: #009BD9;
      border-color: #009BD9;
      color: #fff;
    }

    .sow-submit-wrapper input[type="submit"]:hover {
      background-color: #444444;
      border-color: #444444;
      color: #FFFFFF;
    }

Regards,
Kharis