css - How can I created a blinking button effect in WordPress? - Stack Overflow

admin管理员组

文章数量:1345132

I need someone to help me with a CSS code to make the "Pending" word as seen in the attached image to blink with a red color so that I can use on WordPress theme's Additional CSS section. I need someone to help me with a CSS code to make the "Pending" word as seen in the attached image to blink with a red color so that I can use on WordPress theme's Additional CSS section.

Thank you.

Image of desired result

I need someone to help me with a CSS code to make the "Pending" word as seen in the attached image to blink with a red color so that I can use on WordPress theme's Additional CSS section. I need someone to help me with a CSS code to make the "Pending" word as seen in the attached image to blink with a red color so that I can use on WordPress theme's Additional CSS section.

Thank you.

Image of desired result

• css
• wordpress

Share Improve this question Follow asked yesterday business onlinebusiness online 11 New contributor business online is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 2

• 1 There isn't enough detail in your question for us to give a reliable solution. Please show the relevant HTML/CSS (which you can find by using your browser's devtools inspect facility). – A Haworth Commented yesterday
• Please don't just repeat text to 'fill out' your question but use the extra space to give us more detail. You may like to read: stackoverflow/help/how-to-ask – A Haworth Commented yesterday

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Add a border around the status value, then create an animation which sets border-color: transparent.

#status {
  font-family: sans-serif;
  background: silver;
  color: white;
  padding: 1em;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}

#status > span {
  border: 5px solid red;
  border-radius: 1em;
  padding: 0.5em 0.6em;
  animation: blink 1s step-start 0s infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

<div id="status">
  Shipment Status: <span>Pending</span>
</div>

本文标签： cssHow can I created a blinking button effect in WordPressStack Overflow