<img
  alt="CSS-Tricks."
  id="logo"
  class="css-tricks-logo "
  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/logo-css-tricks.png" />

<button 
  aria-pressed="false"
  class="button"
  type="button">
  Toggle glow
</button>

// Demo
:root {
  --transition-duration-short: 125ms;
  --transition-duration-long: 200ms;
}

.has-orange-glow {
  filter: drop-shadow(0.25rem 0 2rem var(--color-jaffa));
  transition: filter var(--transition-duration-long) ease-in-out;
}

.css-tricks-logo {
  width: 55vw;
  transition: filter var(--transition-duration-long) ease-in-out;
}


// Pen Setup
body {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

img {
  height: auto;
  max-width: 100%;
  padding-bottom: var(--size-delta);
}

.button {
  position: absolute;
  bottom: var(--size-epsilon);
}

const logo = document.getElementById('logo');
const button = document.querySelector('button');

function toggleOrangeGlow() {
  logo.classList.toggle('has-orange-glow');
}

button.addEventListener('click', toggleOrangeGlow);

button.addEventListener('click', event => {
  if (button.getAttribute('aria-pressed') === "false") {
    button.setAttribute('aria-pressed', 'true');
  }
  else {
    button.setAttribute('aria-pressed', 'false');
  }
});