Want buttons that grab attention like what this forum has for the Register Now button for guests?
Instructions:
Demo:
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.
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:
Comment