HOVER EXPANDING LOGIN

@code_candy

26.2K followers · usually 36.3K views a post

Views

300.2K

Likes

18.0K

Comments

154

Shares

1.8K

SoundTikTok sound · original sound - pest_cute

Promoted product

Code Candy Landcodecandyland.com

Free drops, premium bundles and satisfying browser projects from Code Candy — ready to unwrap, learn from, and use in your own builds.

5 videos

Why it worked

The video demonstrates a visually appealing and interactive UI element that is relevant to web developers and designers. The use of a clean, modern aesthetic and the direct display of the underlying code likely resonated with the target audience, driving engagement.

Summary

This video showcases a "hover expanding login" UI element created with code. It demonstrates the initial collapsed state of the login button and then expands to reveal input fields for username and password, along with sign-in, forgot password, and sign-up options.

Structure

1Show initial login button
2Expand to reveal login form
3Show input fields and buttons

More from @code_candy

Product placement

The video displays a UI element called "HOVER EXPANDING LOGIN" which is likely a component or template offered by Code Candy Land, as indicated by the creator's bio link and the CSS code shown.

On-screen text

HOVER EXPANDING LOGIN CodeCandy.css /* * A simple conic gradient on a rotating square */ .box { canvas { position: absolute; width: 170px; height: 170px; translate: -50% -50%; background: conic-gradient( #ff0000 0deg 30deg, #ff8c00 30deg 60deg, #ffe500 60deg 90deg, #00ff00 90deg 120deg, #00ffff 120deg 150deg, #0000ff 150deg 180deg, #8a2be2 180deg 210deg, #ff00ff 210deg 240deg, #ff0080 240deg 270deg, #ff0000 270deg 300deg, #ff8c00 300deg 330deg, #ffe500 330deg 360deg ); filter: blur(12px) drop-shadow(0 0 12px #35eaff); animation: neon-rotate 5s linear infinite; } } @keyframes neon-rotate { to { transform: rotate(1turn); } }