Announcement
Collapse
No announcement yet.
How to Create a Pulsating Button using CSS Animation
Collapse
X
-
You are right. I tried saving without doing anything and I get the same error? Is there a fix?
- Top
- Translate
- Bottom
-
Can you save even without the code here? I suspect this is an existing issue.
- Top
- Translate
- Bottom
-
Both css editor and site builder. I'm not using cloud.
- Top
- Translate
- Bottom
Leave a comment:
-
Is that error from CSS Editor in Sitebuilder? Are you on vBCloud?
- Top
- Translate
- Bottom
-
Originally posted by glennrocksvb View PostWant buttons that grab attention like what this forum has for the Register Now button for guests?
Instructions:- Add these CSS in css_additional template in AdminCP or via Sitebuilder > Style CSS Editor.
Code:.heartbeat { -webkit-animation: pulse 1s ease infinite; -moz-animation: pulse 1s ease infinite; -ms-animation: pulse 1s ease infinite; -o-animation: pulse 1s ease infinite; animation: pulse 1s ease infinite; display: inline-block; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(1.1); } 50% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(1.1); } 50% { -moz-transform: scale(1); } 100% { -moz-transform: scale(1); } } @-ms-keyframes pulse { 0% { -ms-transform: scale(1); } 25% { -ms-transform: scale(1.1); } 50% { -ms-transform: scale(1); } 100% { -ms-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(1.1); } 50% { -o-transform: scale(1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
2. Add hearbeat CSS class to any button or HTML tag you want to use in HTML/Ad/PHP modules, Announcemens, Notices, etc. You can add the heartbeat CSS class to any element you want to pulsate not just to buttons.
3. If you are using this for buttons, you also need to add b-button and b-button--primary or b-button--special CSS classes to the button.
Demo:
<button href="https://www.paypal.me/noypiscripter/5" class="b-button b-button--special heartbeat" target="_blank">My ♥ beats like this</button>
- Top
- Translate
- Bottom
Leave a comment:
-
Right click on the Register Now button on this site and then select Inspect to see how the hearbeat and b-button classes are added to the class attribute in the HTML tag.
- Top
- Translate
- Bottom
Leave a comment:
-
I would like it to be the exact same as yours in the bottom right corner
- Top
- Translate
- Bottom
Leave a comment:
-
Where do you want to use the pulsating button?
- Top
- Translate
- Bottom
Leave a comment:
-
Did you follow all the 3 steps mentioned in the first post?
- Top
- Translate
- Bottom
Leave a comment:
-
Hello Glenn I'm having trouble with the register now button. I implemented the code but its not showing up on the main page, is there something else that needs to be done?
- Top
- Translate
- Bottom
Leave a comment:
-
Hello,
Everything is working GREAT...
Thank You Glenn for the Help!
Thanks a Million!!!!!
RUBE aka D.F.
- Top
- Translate
- Bottom
Leave a comment:
-
Code:<a href="http://www.mywebsite.com/register/" class="b-button heartbeat" style="background:red; color:white;">Register Now!</a>
Last edited by glennrocksvb; 02-12-2022, 12:59 PM.
- Top
- Translate
- Bottom
Leave a comment:
-
Hello Everybody,
I got it working... Couldn't have done it with out you Glenn - Thanks a Million!!!!!
I know I'm pushing my luck, but how hard will it be to change that pulsating button color to Red?
Thank You for Your Time!!!!!
RUBE
- Top
- Translate
- Bottom
Leave a comment:
Users Viewing This Page
Collapse
There is 1 user viewing this forum topic.
- Guest
Latest Posts
Collapse
Leave a comment: