feat: Consistent New Hover Effect on "Book Now" Buttons

[shivam8112005]

Title and Issue number

Title : Consistent New Hover Effect on "Book Now" Buttons in topdeals.html file

Issue No. : #1611

Code Stack : html, css

Close #1611

Description

The "Book Now" button has a smooth 3D flip hover effect:

Initial State: The button is styled with a bold red background (#ff5a5f) and white text, with padding and rounded corners. Hover Effect: On hover, a secondary color layer (#ff787d or #ffa3a6) flips up from below, replacing the original text with a new label. Smooth Transition: The flip effect is achieved with a rotation animation, giving a dynamic yet subtle 3D appearance that draws attention without being distracting.

Video/Screenshots (mandatory)

https://github.com/user-attachments/assets/bf5f1fbe-ef36-4e8b-82f8-4797d3940c45

Type of PR

• [ ] Bug fix
• [X] Feature enhancement
• [ ] Documentation update
• [ ] Other (specify): ___

Checklist:

• [X] I have performed a self-review of my code.
• [X] I have commented my code, particularly in hard-to-understand areas.
• [X] I have tested the changes thoroughly before submitting this pull request.
• [X] I have provided relevant issue numbers, screenshots, and videos after making the changes.
• [X] I have gone through the contributing.md file before contributing
• [X] I have Starred the Repository.

Additional context:

Are you contributing under any Open-source programme?

• [X] I am contributing under GSSOC'24 Extended
• [X] I am contributing under Hacktoberfest'24

[github-actions[bot]]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify[bot]]

✅ Deploy Preview for taupe-cendol-f7e2bb ready!

Name	Link
🔨 Latest commit	01979c441f7e472f3c88ce10c93fea4eaf538b15
🔍 Latest deploy log	https://app.netlify.com/sites/taupe-cendol-f7e2bb/deploys/67275e38a2804f0008032383
😎 Deploy Preview	https://deploy-preview-1618--taupe-cendol-f7e2bb.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[shivam8112005]

@apu52 can you review this so i can open new pr for packages.html styling issue #1610

[apu52]

@apu52 can you review this so i can open new pr for packages.html styling issue #1610

Make a new branch in your forked repo & try to push all of the changes there for the next issue also & make a separate PR , Meanwhile I am reviewing this PR

[github-actions[bot]]

🎉🎉 Thank you for your contribution! Your PR #1618 has been merged! 🎉🎉

[shivam8112005]

got it thank you