Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • April 12, 2018 at 1:07 am #940718
    KingFilly

    Hi there!

    I have 2 questions about my buttons in my color section:

    Q1:
    I would like to have the 2 buttons side by side (inline) and centered.

    Q2:
    I would like to have my second button bordered and add hover colors.
    I tried already this for hover:

    #button2 .avia-button:hover {
    background-color: #163147;!important
    color: #ffffff;!important
    }

    But doesn’t show any changes.

    Hope to hear from you soon. website and password are in Private Content section

    April 12, 2018 at 12:57 pm #940909
    Vinay

    Hey KingFilly,

    To center align 2 or more buttons please check the alignment section of the button element.

    To have a custom hover effect please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top .avia-button:hover {
     background-color: #163147;!important
     color: #ffffff;!important     
}

    To target specific button please enable custom CSS class name support.

    Best regards,
    Vinay

    April 14, 2018 at 10:48 pm #942067
    KingFilly

    Hi Vinay,

    For aligning the buttons, i tried your suggestion but somehow this doesn’t changes anything.
    I gave the Column where the buttons are in the class name .btn-group and gave both buttons the class name .btn-center.
    I copied the code in Quick CSS and nothing changed.

    About the hover effect: For the aligning i have to name both buttons the same Class name. So how can i make sure the CSS code only affects one button (since i have to use one Class name for both buttons?)

    April 15, 2018 at 7:06 am #942136
    Rikard

    Hi,

    1. Try to place the buttons inside of 1/2 elements instead and align them accordingly using the options in the element.

    2. You will need a unique class for each button if you want to style them differently, button-2 for instance. You can then target it by using this CSS:

    .button-2 a:hover {
  background-color: red !important; 
}

    Best regards,
    Rikard

    April 15, 2018 at 8:58 am #942155
    KingFilly

    Hi Rikard,

    1. i would like to have the buttons displayed within the color section. But to test if it works what you say i added a 1/2 element underneath the color section with these settings:
    – Equal Height columns set to Equal – center
    – and named it .btn-group

    I added 2 the 2 buttons inside the 1/2 element and gave both buttons the class name: .btn-center (options / custom css class)

    As you can see nothing changed… :( What am i doing wrong?

    2. I already gave a unique class name to the second button (.btn-center) but this affects both buttons so i cant use this class name. How can you dd another class name to a button? I thought this wasn’t possible.

    Or am i doing something wrong adding the class names at “1”

    April 15, 2018 at 8:05 pm #942273
    Vinay

    Hi,

    If you like to try the method @Rikard suggested you don’t need to use CSS. Just align the buttons to right and left inside the 1/2 columns.

    To align buttons in a single column using custom CSS please add the class names in layout builder elements without a “.” in the beginning and it should work for you.

    Best regards,
    Vinay

    • This reply was modified 6 years, 7 months ago by Vinay.
    April 15, 2018 at 10:03 pm #942308
    KingFilly

    Hi Vinay,

    Tjeez what a stupid mistake. haha i just copied the names to the custom CSS id and didn’t removeed the dots. :P
    Spent at least 2 hours finding the problem.

    I only still have that problem with the hover and border color of the 2nd button. I’m already using the same Custom CSS id for 2 buttons.
    If I use this code:

    .btn-center a:hover {
    background-color: red !important;
    }
    both buttons will change. Or can i use 2 different class names for 1 element / button?

    Hope to hear from you.

    April 15, 2018 at 10:51 pm #942324
    KingFilly

    apparently i could change the custom id of the second button without breaking anything on the page.
    So i got the hover thing working..

    i also tried to add a border this button, but this doesn’t work:

    .button2 {
    border-color: #163147 !important;
    }

    April 15, 2018 at 11:12 pm #942339
    Mike

    Hi,
    When adding a border you will need to tell it what type and size, try this code and adjust to suit.

    .button2 {
    border-color: #163147 !important;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
}

    Best regards,
    Mike

    April 15, 2018 at 11:35 pm #942340
    KingFilly

    thanks Mike, but the border is now larger then the hover color. this looks messy. can’t i just have a border color that surrounds the space just as large as the first button?

    April 15, 2018 at 11:54 pm #942345
    Mike

    Hi,
    Good point, please try this instead:

    .button2 a.avia-button {
    border-color: #163147 !important;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
}

    Best regards,
    Mike

    April 16, 2018 at 12:51 am #942359
    KingFilly

    Like a charm Mike! thanks you very much. you can close this thread now

    April 16, 2018 at 1:17 am #942362
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.
    For your information, you can take a look at Enfold documentation here
    and the video tutorials here
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Change hover color on buttons’ is closed to new replies.