[Feature Request] Add Hover Shadow Effect to Buttons On Homepage

[SumitKumarDev10]

Summary

Currently, the buttons in the home page lack a hover effect, which could provide visual feedback to users. This issue is opened to propose the addition of a subtle shadow effect when the mouse hovers over buttons.

Expected Behavior

When a user hovers over a button, a smooth and subtle shadow effect should be applied, enhancing the visual feedback and improving the user experience.

Screenshots

And

Acceptance Criteria

• Buttons have a noticeable and aesthetically pleasing shadow effect on hover by pointer.
• The shadow effect should be consistent across all buttons on the homepage.
• The implementation adheres to the project's coding guidelines and style.
• Should work in both light and dark scheme

Technical Details

You can use CSS for the same

[mardausdennis]

Using Tailwind CSS's hover state variants and box-shadow utilities, you can achieve the effect. For example:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 hover:shadow-md">
  Taxonomy
</button>

[shiv-2810]

this is still open or closed ? can i work on this?

[SumitKumarDev10]

this is still open or closed ? can i work on this?

Hi @shiv-2810 , I'm actively working on this issue. It's still open, and I'll update it once I have a solution or progress to share.

[SumitKumarDev10]

Hey Everybody! I have been able to do the shadow hover effect in light color scheme but i am facing some difficulties while implementing the same in dark color scheme. Is there any variable in the code that I can import to taxonomy/app/(marketing)/page.tsx? Please let me know the same. Thank You in advance!😊

Current Status:

Problem:

[mardausdennis]

You want to create a shadow effect that adapts to both light and dark themes, you have a couple of options:

1. Global CSS Class:
   • Implement a class in your globals.css.
   • Define different shadow colors for light and dark modes using CSS variables in :root and .dark.
   • Example:

:root {
 --shadow-color [Your Light Mode Shadow Color];
}

.dark {
 --shadow-color [Your Dark Mode Shadow Color];
}

and then use tailwind box-shadow class:
<button class="bg-indigo-500 shadow-lg shadow-shadow-color">Get Started</button>

or of course you can also create a custom class and use this

.custom-shadow {
  box-shadow: var(--shadow-color);
}

When you switch to dark mode, the shadow color will change accordingly. This is a clean approach if you use the shadow effect on many elements across your project.

2. Tailwind's Dark Mode Variant:
   • Define styles specifically for dark mode using Tailwind's dark: variant.
   • Example:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:shadow-md hover:shadow-color.light dark:hover:shadow-color.dark">
Taxonomy
</button>

Either approach works well, depending on your project's needs. The global CSS class method provides a centralized solution for multiple elements, while the Tailwind variant offers a quick way to adjust styles for individual components.

Let me know if you have any further questions!

[SumitKumarDev10]

@mardausdennis
Thanks a lot! It really helped me.😊

[SumitKumarDev10]

Is this better than before?

[mardausdennis]

Looks like you got it to work! 😀 Make sure to close the issue when everything is working fine.

[sikandar1838]

Looks like you got it to work! 😀 Make sure to close the issue when everything is working fine.
test