https://github.com/mirayatech/animated-burger-button
🍔 Animated Tasty Burger Button.
https://github.com/mirayatech/animated-burger-button
animation css food fun hamburger hamburger-button html ui ux
Last synced: 2 months ago
JSON representation
🍔 Animated Tasty Burger Button.
- Host: GitHub
- URL: https://github.com/mirayatech/animated-burger-button
- Owner: mirayatech
- Created: 2024-01-13T08:08:38.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-13T13:32:09.000Z (over 2 years ago)
- Last Synced: 2024-05-04T19:23:08.623Z (about 2 years ago)
- Topics: animation, css, food, fun, hamburger, hamburger-button, html, ui, ux
- Language: CSS
- Homepage: https://animated-burger-button.vercel.app
- Size: 12.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍔 Animated Burger Button
This project features an animated burger button, showcasing CSS animations and hover effects.
## 📦 Technologies
Built with:
- `HTML:` Markup language for creating the structure.
- `CSS:` For styling and animations.
## ⚙️ Getting Started
To view and interact with the animated burger button:
1. Download the project files.
2. Open the `index.html` file in Visual Studio Code.
3. Use the Live Server extension in VS Code to view the project in your web browser.
## 🖱️ Interaction
Hover over and click the burger button to see the animations in action.
## 🛣️ Project Structure
Here are the key files and their purposes:
- **index.html**: The main HTML file containing the structure of the burger button.
- **style.css**: The CSS file that styles the burger button and adds animations.
Feel free to explore and customize these files to suit your needs!
## 📱 Responsive Design
- The animated burger button is responsive, ensuring a seamless experience on both desktops and mobile devices.
## 🔄 Animations
The burger button features various CSS animations that activate on hover and click events. Here’s an overview:
- **Bun**: Animates with a rotation effect.
- **Lettuce**: Animates with a sliding effect.
- **Tomato**: Wriggles slightly.
- **Pickles**: Switch positions.
- **Cheese**: Rotates dynamically.
- **Patty**: Wriggles slightly.