Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 5, 2015 at 2:20 pm #530779
    SynergyLanguageServices

    Hi Guys,

    I would like to change the default styling of the buttons used in the Avia Layout Builder to something like this: http://www.thebigword.com

    The buttons on this page, will be lifted upwards when hovered over, instead of going transparent, and they also have a background shadow.

    Can I amend the default button with Custom CSS to come up with a similar styling?
    Could you help me in giving me a hint how to progress?

    Many thanks in advance.

    Look forward to hearing from you.

    Kind regards,

    Ben

    November 5, 2015 at 4:30 pm #530911
    Elliott

    Hey SynergyLanguageServices!

    Add this to your custom CSS.

    .avia-button:hover, .button:hover { border-bottom: 5px solid red !important; }

    Cheers!
    Elliott

    November 5, 2015 at 4:56 pm #530947
    SynergyLanguageServices

    Hi Elliott,

    Thank you for this code line.

    The good news is that it works, that bad news is that it doesn’t work in a way I imagined.

    It not only lifts up the buttons but the text above the buttons as well (in the same colour section) even though the text block and the button are two different elements.

    I would also like the button to have a shadow effect when it’s unhovered, and as the button is hovered, I would like the button to lift up a bit and the shadow would also increase below it – just the way it does on the example website (www.thebigword.com).

    Also, I would like to switch off the transparency of the button completely, so when it’s hovered over, I want it to stay in the same color as it is without the hovering.

    See it on my website – allotropydigital.com

    Is this possible?

    Many thanks,
    Ben

    November 5, 2015 at 6:17 pm #531054
    Elliott

    Hey!

    You could try giving the unhovered state a bottom padding as well so it doesn’t move the other elements.

    .avia-button, .button { border-bottom: 5px solid blue !important; }
.avia-button:hover, .button:hover { border-bottom: 5px solid red !important; }

    See here for how to do shadows, http://www.cssmatic.com/box-shadow.

    Cheers!
    Elliott

    November 5, 2015 at 6:49 pm #531093
    SynergyLanguageServices

    Hi Elliott,

    Thank you for the updated code and for the link to the website.

    The styling of the button is fine now, but I still have two issues as I explained above which is still not resolved:

    1. I would like to remove the transparency from the hovered button completely. Is there a way to do this?
    2. When the button is hovered over, it still shifts the text elements upwards, how can I avoid this?

    Look forward to your reply.

    Best regards,

    Ben

    November 9, 2015 at 12:02 pm #532494
    Andy

    Hi!

    1. I can’t see any transparency when hovering over your buttons. Could you remove it already?

    2. Use this code in Quick CSS field:

    .btn:hover {
bottom: 0px;
}

    Cheers!
    Andy

    December 1, 2015 at 11:01 pm #545647
    SynergyLanguageServices

    Hi Andy,

    The same applies here too, I went down on a different route now, so this trail can be closed as well.

    Thanks,

    Ben

    December 2, 2015 at 5:39 am #545736
    Rikard

    Hi again Ben,

    I’ll close this thread so please open a new one if you should have any other issues.

    Thanks,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘customising buttons in Avia Layout Builder’ is closed to new replies.