https://github.com/adityamamta/floating-menu-action-btn

Floating Menu Button | HTML, CSS & Javascript
https://github.com/adityamamta/floating-menu-action-btn

button floating-action-button frontend-web html-css-javascript

Last synced: 5 days ago
JSON representation

Floating Menu Button | HTML, CSS & Javascript

• Host: GitHub
• URL: https://github.com/adityamamta/floating-menu-action-btn
• Owner: adityamamta
• Created: 2024-11-08T06:09:20.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-20T06:40:41.000Z (about 2 months ago)
• Last Synced: 2024-11-20T07:33:25.343Z (about 2 months ago)
• Topics: button, floating-action-button, frontend-web, html-css-javascript
• Language: CSS
• Homepage: https://adityamamta.github.io/floating-menu-action-btn/
• Size: 258 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Floating Menu Button with Animated Icons

##  

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 

- linkedin. [Linkedin](https://www.linkedin.com/in/adityamamta/)

- Email: [email protected]