Home / Forums / You Theme Support / Button colour – how to change if don't want one of the pre-set options

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts

  • Brandelity
    Participant

    I don’t seem to have an option to set my “outline style” button to a custom colour. There is just a drop down which has about 25 colours in it.

    Is there an easy way of doing this?

    Thanks

    Hi @brandelity

    If you want to use custom colors, other than the ones listed, the best option is to add custom CSS.

    Please send over your site’s URL or the page URL where the button is so I can give you the exact CSS to override the current colors.

    Regards,


    Brandelity
    Participant

    The CTA buttons are at the bottom of these 3 pages and I was hoping to have one button magenta and one blue (same colours as our logo…

    http://brandelity.co.uk/who/
    http://brandelity.co.uk/what/
    http://brandelity.co.uk/why/

    The colors are #e6007e – magenta and #009fe3 – blue

    Thanks so much for all your help!
    I did send the login before (have a holding page so cant see content unless logged in), not sure if you need me to send it again.

    Narelle

    Hi @brandelity

    I saw the login from the other ticket you opened.

    Since you are applying 2 separate colors to 2 buttons, the best option would be to add unique class names to each button and use the class name to style the button.

    I applied it on this page: http://brandelity.co.uk/why/

    If you edit the page then edit the buttons, you will see I added ‘Extra Class Name’ to each of the button.

    I then applied this CSS into Theme Options > Custom CSS

    .vc_btn3-container.magenta-button {
        background-color: #e6007e;
    }
    .vc_btn3-container.blue-button {
        background-color: #009fe3;
    }

    Regards,


    Brandelity
    Participant

    Thanks so much. All makes sense.

    However I wanted the colour to change on hover and not be the background colour. I tried to alter this myself by changing the above code to a number of things

    .vc_btn3-container.magenta-button a.hover {
    color: #e6007e;

    .vc_btn3-container.magenta-button a:hover {
    color: #e6007e;

    .vc_btn3-container.magenta-button .action-hover {
    color: #e6007e;

    Also tried changing it from color to background-color and this still didn’t work! Something else I’m doing wrong?

    Once again thanks for your help.

    Hi @brandelity

    Correct CSS for the hover should be:

    .vc_btn3-container.magenta-button .vc_btn3.vc_btn3-color-black.vc_btn3-style-outline:hover {
        background-color: #e6007e;
    }

    Regards.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.