How to Create a Pulsating Button using CSS Animation

[glennrocksvb]

You don't use it as an HTML tag but use it in a class attribute in an HTML tag.

[LarryMyster]

glennrocksvb So I added the CSS and then created a HTML module but it doesn't come out right.

This is was i put in the HTML block

<center><heartbeat><a href="{register_page}"target="_blank">Register now!</a></heartbeat></center>

[Mackey]

This is crazy (in a good way). I added this to a flash flip clock on the main forum page and it's beating right along with the seconds changing. I probably won't leave it up long cause it looks .... crazy. I put a screen capture video if you want to see it.

[Rashidkareem]

Good nice work

[Daryn]

This is a really clever little hack. Thanks a bunch! Looks nice on the online indicator icon.

[glennrocksvb]

Want buttons that grab attention like what this forum has for the Register Now button for guests?

Instructions:

1. Add these CSS in css_additional template in AdminCP or via Sitebuilder > Style CSS Editor.

.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:

My ♥ beats like this