Glowing Button Animation

AI Overview: Glowing Bell Button

This project is an interactive, highly stylized "Notify Me" component featuring a swinging, metallic bell. Its primary purpose is to provide a visually engaging way for users to toggle notifications. When the bell is "on," it glows brightly, emits rotating light rays, and reveals a "Notify Me" button below it. When clicked, the bell enters an "off" state, dimming the lights and hiding the button.

The project is built entirely using HTML and CSS, with a tiny bit of JavaScript to handle the interaction. The bell itself is constructed from multiple overlapping div elements, each representing a different part of the object—such as the rope, the base, and various shadow or glow layers. This layered approach, combined with complex gradients and box-shadow properties, creates a realistic 3D metallic effect without using any external image files.

The interactivity is handled by a simple JavaScript toggle that adds or removes a CSS class.

<div class="bell-container off" onclick="this.classList.toggle('off')">

This line of code detects a click on the bell and toggles the "off" class, which controls whether the bell is glowing or dark.

The animation is driven by CSS keyframes. The main swinging motion is achieved by rotating the entire container around a specific point high above the bell, simulating a long rope.

@keyframes bell {
	0% { rotate: calc(1deg * var(--degofrot)); }
	50% { rotate: calc(-1deg * var(--degofrot)); }
	100% { rotate: calc(1deg * var(--degofrot)); }
}

This CSS animation makes the bell swing back and forth smoothly by changing its rotation angle over five seconds.

To create the "glowing" effect, the code uses a combination of filters and opacity changes. When the "off" class is present, specific elements like the light rays and the volumetric glow are hidden.

.off .bell-rays {
	opacity: 0;
}

This rule ensures that the light rays emanating from the bottom of the bell disappear instantly when the bell is turned off.

Finally, the "Notify Me" button uses its own set of animations and shadows to match the bell's movement. It even includes a "grain" overlay created with an SVG filter to give the entire scene a cinematic, textured look.

.off + .button {
	opacity: 0;
	pointer-events: none;
}

This snippet hides the "Notify Me" button and prevents users from clicking it whenever the bell is in the "off" state.