• You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

How to create an Animated Button like this?

Riddik

Member
Feb 4, 2023
157
20
18
Hi guys i just want to know about this kind of button code for wordpress post so i can use it by shortcode or something
also need to know about Elementor animated button short codes how to use it in the post directly
can anyone help me please ?

there is another code i find out which is maybe visual composer code i need exectly this type of code for my animated button
Code:
<div class="vc_cta3-actions">
<div class="vc_btn3-container vc_btn3-center"><a class="vc_general vc_btn3 vc_btn3-size-lg vc_btn3-shape-rounded vc_btn3-style-custom vc_btn3-block vc_btn3-icon-left" style="background-color: #b3f600; color: #14141b;" title="" href="#" target="_blank" rel="noopener"><i class="vc_btn3-icon fas fa-cloud-download-alt"></i>VISIT HERE</a></div>
</div>
</div>

i want to use this code which is not working ofcource i dont know how to use it please check below code and tell me how to use in wordpress

CSS
Code:
.pulse-button {
box-shadow: 0 0 0 rgba(255,255,255, 0.9);
animation: pulse 2s infinite;
}
.pulse-button:hover {
animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.9);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
box-shadow: 0 0 0 0 rgba(255,255,255, 0.9);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(255,255,255, 0);
box-shadow: 0 0 0 10px rgba(255,255,25544, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
box-shadow: 0 0 0 0 rgba(255,255,255, 0);
}

HTML
Code:
<a href="" class="pulse-button">Button</a>
 

Attachments

  • 2023-03-23_15-54-12.gif
    2023-03-23_15-54-12.gif
    1.3 MB · Views: 54
  • shortcode.PNG
    shortcode.PNG
    16.5 KB · Views: 44
Last edited:
ELEMENTOR

Click on the button you want to animate.

Goto Advanced tab -> Layouts

Change CSS Classes to "box" for example

Then paste this in the Custom CSS section

CSS:
.box {
  animation: ZoomInZoomOut 1s linear infinite;}

@keyframes ZoomInZoomOut {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
 
  • Like
Reactions: Riddik
ELEMENTOR

Click on the button you want to animate.

Goto Advanced tab -> Layouts

Change CSS Classes to "box" for example

Then paste this in the Custom CSS section

CSS:
.box {
  animation: ZoomInZoomOut 1s linear infinite;}

@keyframes ZoomInZoomOut {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
on Elementor i allready made custom button and add css as well allready my problem is how to add short code in wordpress post and which code?

the attached image is not made in elementor i think css only

the third code for visual composer for example what kind of code i need in my post
 

Attachments

  • shortcode.PNG
    shortcode.PNG
    16.5 KB · Views: 13
thanks for the effort but this animation is different please check my attached animation which is pulsing
Take a look at the codepens. Everything you have in order to create a pulsing button is in those examples. You just need to slightly modify them. Shouldn't take you longer than 5 minutes.

If too lazy just ask chatGPT. It allowed me to do it in 10 seconds.

@infinite2310 already posted the exact code you want. Follow his instructions. You need to add custom CSS. It's not as simple as copying & pasting the code inside a post.
 
You should go to the Text tab not the Visual tab in Classic Editor.

Then paste something like this, just an example:

<div class="notification">New Message!</div>

Then in CSS:


Code:
.notification {
animation: pulse 0.75s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
 
  • Like
Reactions: Mugger67
You should go to the Text tab not the Visual tab in Classic Editor.

Then paste something like this, just an example:

<div class="notification">New Message!</div>

Then in CSS:


Code:
.notification {
animation: pulse 0.75s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
didnt work try exectly as you said
 
@3nails1cross @infinite2310 @Energy please check the code on the thread and let me know how to use it?
i tried but failed added css code in Additional CSS and then in post section editor TEXT i put html code but nothing work let me know if you guys can help me thanks.
 
Then upload it to a free hosting provider. You keep making excuses for such a simple thing
 
didnt work try exectly as you said
It should work. Try it. Just some sample CSS.

<div class="notification">New Message!</div>

Code:
.notification {
animation: pulse 1.5s infinite;
background-color: red;
color: white;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock