Buttons with pulse effect in CSS3

Date: 
18. November 2021
Author: 
mbs
Category: 

Don't use <blink>!

These buttons are made with WordPress and pure CSS inside Oxygen Builder and with "pulsing" effect.
Afterwards simply created buttons in Gutenberg Editor with 1 class on each button.


First I removed all the styles from the Original WP Buttons with this CSS code.

You can do this otherwise, but I like to have it clean.

/* Remove styles from wp-buttons*/
.wp-block-button {
    margin: 0 !important;
}
.wp-block-button__link {
	background-color: transparent;
}

Then I created a button in Gutenberg, and gave the first div the class "pulse1"

And added this CSS

.pulse1 a {
    -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    text-align: center;
    white-space: nowrap;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 15px;
    width: 230px;
    box-shadow: 0 0 0 0 rgba(210, 210, 210, 0.7);
    background-color: grey;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 300ms ease-in-out;
    text-transform: uppercase;
    font-weight: bold;
}
a.pulse1:hover {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    color: #ffffff;
}
@-webkit-keyframes pulsing {
    to {
        box-shadow: 0 0 0 20px rgba(180, 180, 180, 0);
    }
}
@-moz-keyframes pulsing {
    to {
        box-shadow: 0 0 0 20px rgba (180, 180, 180, 0);
    }
}
@-ms-keyframes pulsing {
    to {
        box-shadow: 0 0 0 20px rgba(180, 180, 180, 0);
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2007-2024 mbsTECH.dk 
by Michael Bay Sørensen
WebGPT.ninja
Build with
and 
Oxygenbuilder
I'm using 
Ahoy