<div class="demo">
  <svg viewBox="0 0 24 24">
    <path d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z" /> </svg>

  <span>Attention Shoppers!</span>
</div>

<button id="toggle">Toggle Revert</button>
html {
  background: #100e17;
}

body {
  color: green;
  padding-top: 3rem;
  text-align: center;
}

svg {
  fill: gold;
  height: 2.5rem;
  margin-right: 0.5rem;
  transform: translatey(10px);
  width: 2.5rem;
}

span {
  color: #fff;
  display: block;
  font-size: 30px;
  font-weight: 800;
  transform: translatey(10px);
}

.revert {
  color: revert;
  display: revert;
}

button {
  background-image: linear-gradient(to top left, #ff8a00, #e52e71);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  margin-top: 2rem;
  padding: 1rem 1.5rem;
}
button:hover {
  background-image: linear-gradient(to top left, #ff8a00 30%, #e52e71);
  transform: translateY(1px);
}
button:active {
  transform: translateY(2px);
}
$("#toggle").click(function () {
  $("span").toggleClass("revert");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js