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);
}
}
Liked this article? Please follow me on TwitterFollow @baysorensen