Glowing Color in Styled Components Button

Question

I wanted to achieve a glowing effect exactly like this video. Pls play this video https://i.sstatic.net/uuI91.jpg

Currently, on my code, the glowing looks different and its outside the button.

CODESANDBOX -----> CODESANDBOX

const LiveNow = styled.span`
  display: inline-block;
  padding: 0.5rem 0.8rem;
  background: transparent linear-gradient(180deg, #eb1a30 0%, #ea1973 100%) 0%
    0% no-repeat padding-box;
  border-radius: 8px;
  font-size: 13px;
  color: #fff;
  flex-grow: 0;
  z-index: 1;
  position: absolute;
  top: 16px;
  left: 16px;
  font-weight: bold;
  -webkit-animation: glowing 1300ms infinite;
  -moz-animation: glowing 1300ms infinite;
  -o-animation: glowing 1300ms infinite;
  animation: glowing 1300ms infinite;

  @-webkit-keyframes glowing {
    0% {
      background-color: #eb1a30;
      -webkit-box-shadow: 0 0 3px #eb1a30;
    }
    50% {
      background-color: #ea1973;
      -webkit-box-shadow: 0 0 15px #ea1973;
    }
    100% {
      background-color: #eb1a30;
      -webkit-box-shadow: 0 0 3px #eb1a30;
    }
  }
  @keyframes glowing {
    0% {
      background-color: #eb1a30;
      box-shadow: 0 0 3px #eb1a30;
    }
    50% {
      background-color: #ea1973;
      box-shadow: 0 0 15px #ea1973;
    }
    100% {
      background-color: #eb1a30;
      box-shadow: 0 0 3px #eb1a30;
    }
  }
`;

Answer 1

You are probably looking for something like this.

Using opacity is not an option since it also affects the text, but you want only the background to be affected. Instead, use rgba where the last parameter serves as an opacity (i.e., rgba(red, green, blue, alpha)).

import React from "react";
import { render } from "react-dom";
import styled from "styled-components";

const LiveNow = styled.span`
  display: inline-block;
  padding: 0.5rem 0.8rem;
  background: transparent
    linear-gradient(180deg, rgba(235, 26, 48, 1) 0%, rgba(234, 25, 115, 1) 100%)
    0% 0% no-repeat padding-box;
  border-radius: 8px;
  font-size: 13px;
  color: #fff;
  flex-grow: 0;
  z-index: 1;
  position: absolute;
  top: 16px;
  left: 16px;
  font-weight: bold;
  -webkit-animation: glowing 1300ms infinite;
  -moz-animation: glowing 1300ms infinite;
  -o-animation: glowing 1300ms infinite;
  animation: glowing 1300ms infinite;

  @-webkit-keyframes glowing {
    0% {
      background: rgba(235, 26, 48, 0.7);
    }
    50% {
      background: rgba(234, 25, 115, 1);
    }
    100% {
      background: rgba(235, 26, 48, 0.7);
    }
  }
  @keyframes glowing {
    0% {
      background: rgba(235, 26, 48, 0.7);
    }
    50% {
      background: rgba(234, 25, 115, 1);
    }
    100% {
      background: rgba(235, 26, 48, 0.7);
    }
  }
`;

const App = () => (
  <div>
    <LiveNow>Live</LiveNow>
  </div>
);

render(<App />, document.getElementById("root"));