<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);
}
View Compiled
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');
}
});
This Pen doesn't use any external JavaScript resources.