SyntaxUI / syntaxui

Get free access to pre-built, Tailwind CSS-powered components, animations and effects - brought to life using Framer Motion. Just copy, paste and you're ready to go!
https://syntaxui.com
MIT License
587 stars 43 forks source link

[FEATURE]: Add a Glassmorphic button #188

Closed vishnuprasad2004 closed 3 weeks ago

vishnuprasad2004 commented 1 month ago

Feature Description 📝

A Glassmorphism Button (button with glass-like effect)

Tailwind Playground link: https://play.tailwindcss.com/Y9Sr11vrVR

Screenshots 📸

In Light Mode image In Dark mode image

github-actions[bot] commented 1 month ago

Hello @vishnuprasad2004,

Thanks for creating this issue and contributing to SyntaxUI!

@Ansub will review your issue soon and provide feedback. In the meantime, feel free to join the discord community, It's a great place to discuss the project, ask questions, and connect with other contributors.

Please ensure that you have followed the contributing guidelines for a smooth review process.

epoll31 commented 1 month ago

I had also created a Glassmorphism Button for SyntaxUI in the past.

Here is what mine looks like.

https://github.com/Ansub/SyntaxUI/assets/16091805/31a88df8-1122-4d3d-9900-6335e75f7d99

Ansub commented 1 month ago

@epoll31 what if we remove that red background at the back

epoll31 commented 1 month ago

This is what that looks like:

Screenshot 2024-05-13 at 9 53 48 AM

The red part behind it is what gives it it's glassy look.

Ansub commented 1 month ago

hmm, you are right. we can do something similar to this then

https://codepen.io/tin-fung-hk/pen/MWrRqBw

epoll31 commented 1 month ago

That's pretty similar to what I had :). Do you want me to make it a square, or rotate the background, or both?

Ansub commented 1 month ago

can you raise a PR for the glassmorphism button you made or lmk if it was already there i will re-open it

Ansub commented 1 month ago

we actually need that button but looking for a better UI @vishnuprasad2004