Skip to content

adityamamta/floating-menu-action-btn

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Floating Menu Button with Animated Icons

Click to view live website

This project showcases a responsive floating menu button with animated icons using HTML, CSS, and JavaScript. Clicking the main button reveals three icons (edit, save, and profile) that smoothly transition with delay and subtle hover shadows for a polished look.

Features

  • Animated Toggle Button: The main button rotates upon activation.
  • Smooth Expanding Links: Icons slide out from the center with staggered transitions and fade effects.
  • Shadow on Hover: Icons have a shadow effect on hover for a subtle, interactive feel.
  • CSS Transitions and JavaScript Toggle: CSS handles the animations, while JavaScript toggles active states for rotation and visibility.

Technologies Used

  • HTML
  • CSS (with transitions for animations)
  • JavaScript (for toggling classes)

Usage

  • Click on the main floating button to reveal the action icons.
  • Hover over icons to see the shadow effect.
  • Customize by adjusting translate values, colors, or adding more icons.

💼 Contact me