Home / Forums / DynamiX Support / button custom css and background gradient

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

  • Lucaseatp
    Participant

    How do I modify the button hover using custom css?

    This is the button code

    [vc_btn title="Quero me inscrever agora" style="outline" color="white" size="lg" align="center" i_align="right" i_icon_fontawesome="fa fa-arrow-right" add_icon="true" link="url:%23fundador||" el_class="hover { background-color: #8d9eb8; color: #ffffff; }"]

    An example you can see in the end of this page http://criarh.com.br/ponte-da-inovacao/

    I want the hover to stay white, but the background change to 50% opacity of the color #8d9eb8

    How do I do that?

    Also, is it possible to use a gradient on my background color? If yes, how do I do this?

    Thank you.

    • This topic was modified 7 months ago by  Lucaseatp.

    Lucaseatp
    Participant
    This reply has been marked as private.

    Hi @lucaseatp

    Copy and paste this CSS into Theme Options > Customize > Custom CSS

    a.vc_general.vc_btn3.vc_btn3-size-lg.vc_btn3-shape-rounded.vc_btn3-style-flat.vc_btn3-icon-right.vc_btn3-color-success:hover {
        background-color: rgba(141,158,184,.5);
    }

    This should change hover color of the button on that page.

    Thanks!


    Lucaseatp
    Participant

    Hello,

    It didn’t work. I don’t know why…

    You can check on the website.

    And what about the gradient?

    Thank you!

    Hi @lucaseatp

    I do not see the CSS added either are Theme Options or Custom CSS. I have added it and the hover color now works.

    If you want to add a gradient, then you just need to replace the background-color on the CSS to the gradient values.

    The CSS is under Theme Options > Customize > Custom CSS.

    Thanks!


    Lucaseatp
    Participant

    Hello,

    I had added the CSS on the custom CSS, but as you can see, it does not apply where I want it to apply.

    I wanted it to apply just on the last button on the page that I linked.

    This way you did applies to many buttons on my whole website, but not on the button I want. That’s why I removed the code before.

    Can you take another look at this? Also, can you help me with the code for gradient? I don’t really know CSS.

    Thank you!!

    There was a mix-up as I was basing the code on the first button on the page as I thought it was only one row.

    This should be fixed now.

    Can you please check?

    Thanks!


    Lucaseatp
    Participant

    it worked now, it is on the right button, but I also want the font color to remain white, can you do it?

    Thank you!

    Hi @lucaseatp

    You may add color: #ffffff; to the CSS code I added.

    That should set the font color to white while hovering the button.

    Thanks!


    Lucaseatp
    Participant

    It worked, thank you!

    And what about the gradient color background, can you help me? I don’t know nothing about CSS and couldn’t do it by myself.

    Thank you

    Hi @lucaseatp

    Change the background color to on the CSS I sent to:

    background: linear-gradient(to bottom, rgba(141,158,184,.5), rgba(141,158,184, 1));

    Thanks!


    Lucaseatp
    Participant

    Hello,

    The gradient I was talking about is the column background, not the button background…
    The code worked, but in the button ๐Ÿ˜›

    Also, I noticed that the gradient goes top to bottom, can it be 45ยบ? from top left to bottom right.

    Can you help me?

    Hi @lucaseatp

    It was not specified where you wanted to apply it so I assumed it’s for the button. Can you please specify which column you want it applied to?

    Thanks!


    Lucaseatp
    Participant

    any colorized column background… So I can copy the code to another column

    Hi @lucaseatp

    To make it easier for you, use Chrome Dev Tools or Firebug to identify the class of the column you want to apply it to and apply the gradient CSS I have sent before to that class.

    Regards,

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

You must be logged in to reply to this topic.