-
AuthorPosts
-
April 11, 2022 at 8:01 pm #1348001
Hello,
The client asked for an image on the button, I used the css content property and the ::after selector to place the image.
They now have asked for this to be clickable (makes sense).
I cannot make it clickable through css..is there a script I can use or another way to accomplish this? Its a simple ask but its not working out that way.
Thank you much
April 12, 2022 at 4:57 am #1348027Hey finchkelsey,
Thank you for the inquiry.
Have you tried using the Button element in the builder? You can set the image URL in the Content > Link Settings > Button Link? field and it will automatically open inside a lightbox on click.
Best regards,
IsmaelApril 12, 2022 at 9:32 am #1348060Hi, that function is not at all what the client has asked for. Did you look at what we currently have?
Please advise on a solution that looks as it is now, but the image is clickable.
Thank you, this is urgent.
April 12, 2022 at 9:59 am #1348064choose for that button alb element the option to have an icon. place it where you like – even to see only on hovering.
then replace that icon by an image via quick css.
To better select the specific button – give a custom class to the button alb itself – f.e.: imagebutton.avia-button-wrap.imagebutton { overflow: hidden; } .imagebutton .avia_button_icon { height: 0px; overflow:visible; display: inline-block; vertical-align: top !important; } .imagebutton .avia_button_icon::before { content: ""; background-image: url(/wp-content/uploads/IMAGE.svg); /*** path to your image file ***/ background-repeat: no-repeat; background-size: contain; width: 50px; height: 50px; position: relative; display: inline-block; top: -11px; left: -5px; }
See here – buttons on the right – green or blue one: https://webers-testseite.de/buttons/
April 12, 2022 at 12:55 pm #1348098if you like to have a whole background-image you do not need the code above – just:
.avia-button-wrap.custom-class { display:inline-block; background-image: url(/wp-content/uploads/Your-Image.jpg); background-size: cover; }
April 12, 2022 at 7:42 pm #1348155Thank you, this is working. Can you advise on the height of the button now…thank you
April 13, 2022 at 5:38 am #1348180Hi,
You can adjust the height of the button by adjusting the height property of the image or element in this css code.
.imagebutton .avia_button_icon::before { content: ""; background-image: url(/wp-content/uploads/IMAGE.svg); /*** path to your image file ***/ background-repeat: no-repeat; background-size: contain; width: 50px; height: 50px; position: relative; display: inline-block; top: -11px; left: -5px; }
Best regards,
IsmaelApril 13, 2022 at 7:26 pm #1348307Hi Ismael,
I need an adjustment made to my css specifically not the general ‘how’. I appreciate your moderation but if you could view the link and then answer the questions that would be appreciated.
Simply adjusting the height is not working and the button is blowing out..I am unable to fix it
- This reply was modified 2 years, 8 months ago by finchkelsey.
April 14, 2022 at 7:22 pm #1348453April 15, 2022 at 2:58 am #1348467Hi,
Did you try to adjust the height of the button image? You can also adjust the padding around the buttons to adjust the total height.
#top .cutbutton .avia_button_icon::before { height: 30px; } #top .cutbutton .avia-button { padding: 10px; }
If you can provide us a screenshot or a mockup of the final layout, then we should be able to provide you with the necessary css.
Best regards,
Ismael3 -
AuthorPosts
- You must be logged in to reply to this topic.