Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #1047158

    Hi there,
    I added an image to my frontpage and changed it’s appearance to make it look like a button (the golden one with “Sportmassage” on it).
    Now I saw a very cool background gradient animation on another page and want to add it to my button (just in white color) if possible, but have no idea how to.
    Could you help me?
    I want the effect to look like the on at the yellow button on this page:

    Best regards


    Also, is it possible to change it’s position and sitz when the page is being scrolled?
    I could change its position to “fixed”, but then i would like it to become smaller and move a little to the left, as soon as someone starts scrolling down the page?
    Thank you in advance


    Is there anybody who can help? Please?


    Hi Misantaller,

    They are using some SVG and some css to do that.
    It’s a bit complicated but if you’d give us temporary admin access, we’ll try to add it for you.
    Just post the login credentials in private content.

    Best regards,


    Hi nikko, thanks for your answer. Of course.


    maybe this effect of enfold standard behavior of a standalone icon (right side of the example ) could be an alternative:
    but this is only on hovering the “button” – you can have a link on the icon and an optional Caption.
    The animation effect is called: sonarEffect


    this seems to be only a png file:
    you can do it with pseudo content.
    insert an image from alb elements and give it a custom class ( i took : animated-button )

    then we create the before content:

    .animated-button .avia_image::before {
        content: "";
        background-color: rgba(255,255,255,1);
        border-radius: 50%;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        animation: pulse 3s ease-in-out 0s infinite

    to have not the overlay effect on enfold images and to see the scale effect :

    .animated-button .image-overlay {
        display: none !important;
    .animated-button .avia_image {
        overflow: visible !important;

    now the animation keyframe for it:

    @keyframes pulse {
      0% {
          transform: scale(1.05);
          opacity: 1
      50% {
          transform: scale(1.25);
          opacity: 0.3
      100% {
          transform: scale(1.05);
          opacity: 1

    see result :
    you can change it to your needs?
    In my case it is a dark background image so – it is a white pulsating thing.


    you see how it works : the keyframe is the base for the animation.
    you have start point and some interstage points and the end point. If you like you can do more here – or set an 80% style etc. pp.
    on the animation then you take this custom defined keyframe for it.


    I guess I did it! Thank you very much for your help!!
    Can you check it out if it looks good on your site?
    Best wishes,


    sorry – i’m Participant as you are – so i can not see Private Message Area.


    Hi Misantaller,

    It’s looking great :)

    @guenni007, thanks for helping out. :)

    Best regards,

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

You must be logged in to reply to this topic.