This is very simple but effective. Thanks.
Announcement
Collapse
No announcement yet.
How to Create a Pulsating Button using CSS Animation
Collapse
X
-
Hello Everybody,
I really like the Sticky Default Guest Notice, but I'm having problems with the pulsating Register Now text.
I went to css_additional.css and installed this code...
PHP Code:.l-desktop .notice[data-notice-id='1'] { position: fixed; z-index: 2; bottom: 0; right: 0; margin: 10px; width: 400px; box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.7); }
PHP Code:<a href="http://www.mywebsite.com/register/" class="b-button b-button--primary heartbeat">Register Now!</a> .l-desktop .notice[data-notice-id='1'] { position: fixed; z-index: 2; bottom: 0; right: 0; margin: 10px; width: 400px; box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.7); } .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); }
Thank You for Your Time!!!!! RUBELast edited by RUBE; 11-22-2017, 11:05 AM. Reason: I'm having a problem with the format of my post, how can you make the code (container) windows taller?
- Top
- Translate
- Bottom
Comment
-
You should not add HTML code in CSS! There's no instruction that says so. Put all the necessary CSS code in css_additional template in AdminCP or CSS Editor in Sitebuilder.
Then put the HTML code for the Register button in the Notice itself. See post #11 to see what HTML code to use for the button.Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
Comment
-
Originally posted by RUBE View PostI'm having a problem with the format of my post, how can you make the code (container) windows taller?Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
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.Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
Comment
-
Did you follow all the 3 steps mentioned in the first post?Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
Comment
-
Where do you want to use the pulsating button?Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
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.Helpful? Donate. Thanks!
Fast VPS Host for vBulletin:
A2 Hosting & IONOS
- Top
- Translate
- Bottom
Comment
-
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
Comment
Users Viewing This Page
Collapse
There is 1 user viewing this forum topic.
- Guest
Latest Posts
Collapse
-
Comment on Topic Starter Ribbon for vBCloudby glennrocksvbThanks for confirming the fix works.Today, 08:20 AM
-
Get Affordable and Fast VPS for vBulletin -
Reply to Topic Starter Ribbon for vBCloudby glennrocksvbI have updated the template code in the first post. Please try it again.Today, 06:38 AM
Comment