Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 11, 2022 at 8:01 pm #1348001
    finchkelsey

    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 #1348027
    Ismael

    Hey 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,
    Ismael

    April 12, 2022 at 9:32 am #1348060
    finchkelsey

    Hi, 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 #1348064
    Guenni007

    choose 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 #1348098
    Guenni007

    if 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 #1348155
    finchkelsey

    Thank you, this is working. Can you advise on the height of the button now…thank you

    April 13, 2022 at 5:38 am #1348180
    Ismael

    Hi,

    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,
    Ismael

    April 13, 2022 at 7:26 pm #1348307
    finchkelsey

    Hi 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, 7 months ago by finchkelsey.
    April 14, 2022 at 7:22 pm #1348453
    finchkelsey

    bump

    April 15, 2022 at 2:58 am #1348467
    Ismael

    Hi,

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.