Want to Blink Button or Text at WordPress in 2022

While working on the project of my digital Agency, I often get trapped in a problem. As many of our clients ask to make a part of their WordPress website blink but there are almost no valid methods available to make WordPress webpage blink.

When I talked with many other webmasters, I often got amazed as they also found this issue in their journey of web mastership.

So, in this article, we are going to talk about the ways to blink a text or button in the WordPress CMS.

There is almost two way to Blink text in WordPress. These two are listed below in a very detailed manner:

Plugin:

We can blink the WordPress website through a WordPress plugin and currently, there is only one plugin is available for this purpose. The Plugin which can help you regarding this is listed below:

Neon text:

neon plugin blinking

The neon text is a WordPress plugin that allows webmasters to create an easy shortcode to customise your pages and posts with a neon text effect. The shortcode generator helps you through the options for the shortcode.

How to install Neon Text:

To install the neon text WordPress plugin, you must have to install it in the way listed below:

Neon how to install
  1. Install and activate the Neon Text plugin in your WordPress website dashboard.
  2. Access to the Neon Text plugin in the menubar,
  3. Now You have configure the NEON text plugin to blink text
  4. Click the Generate Shortcode button and then copy the shortcode.
  5. Paste the shortcode into your desired article.
How to Configure the Neon Text WordPress Plugin:
  • color: text color
  • reblinkprobability: probability of reblink
  • blinkmin/blinkmax/loopmin/loopmax: used to config the blink animation
  • glow: CSS text-shadow property
  • blink: the amount of binking characters
  • off: the amount of off characters

Done, you have started to show text in the blinking modes.

You must use the following codes to make your WordPress website blink.

what to Blink

For example:

I have to blink “newsbuddy.in” in my WordPress-based webpage, I have to write

newsbuddy.in

and it will start blinking.

We have learned how we can blink the text through wordpress plugins. Now, we are going to learn how we can blink the text through CSS.

Note: This method is useful for every type of website powered by any web development technology starting from Raw HTML, Ruby or any other.

For example – We have to blink a text “blinking text”.

Here is an HTML page

<!DOCTYPE html>
&alt;html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BlinkingTotalText.css">
<title>Blinking Text</title>
</head>
<body>
<h2>Demo for Blinking Entire Text</h2>
<p class="a1">Blinking Text in CSS defined as changing color of the text with
equal time intervals.</p>
<p class="a2">Blinking Text is using when updating important news in the news
website. Because it is human tendency to look at the things which are
changing continuously. So, by making the text blink takes some
attention very quickly.</p>
</body>
</html>

and the required CSS code for the HTML to blink the text is

h2{
color: green;
}
.a1, .a2{
animation:blinking 1.5s infinite;
font-size: 20px;
}
@keyframes blinking{
0%{   color: red;   }
47%{   color: #000; }
62%{   color: transparent; }
97%{   color:transparent; }
100%{  color: #000;   }
}

the output of the whole coding we have done above is

image
Output

From the above, we learned how we can blink text when it is in HTML format. Now, we will learn how we can do this for WordPress.

image 1

To blink the text in WordPress you need to paste the above CSS code in the “additional CSS classes” of the block you want to blink.

2 Comments

  1. Julia Zhou says:

    Thank you for your post.

    I want to install the plugin , but it shows the plug in neon text was published 4 years ago, not tested with the current version of wordpress, will that be a problem?

Leave a Reply

Your email address will not be published.