Button Styling Inconsistency with Website Theme

[shantanu020]

Issue Title:

Button Styling Inconsistency with Website Theme

Description:

The current button styling does not align with the overall black and white theme of the website. The button lacks the pixelated aesthetic that is intended to complement the design, leading to a mismatch in visual coherence.

Expected Behavior:

• The button should have a pixelated look with a solid black background and white text.
• The border should be a clear white to contrast against the black background.
• The button should have defined padding and spacing that reflects a pixelated design, with uppercase text for emphasis.
• Hover effects should transition smoothly, changing the background to white and text to black while maintaining the pixelated style.

Current Behavior:

• The button appears too standard and does not fit the pixelated design concept of the website.
• There may be missing hover effects or inconsistent colors that detract from the user experience.

Proposed Solution:

• Update the button CSS to incorporate a more pixelated design that matches the black and white theme of the website.
• Ensure that all button states (normal, hover, active) are visually cohesive with the overall aesthetic.

This issue should be prioritized to enhance the user interface and maintain the desired website theme.

[shantanu020]

I would like to work on the issue please assign it to me

[lcrojano]

Hi @shantanu020,

Thank you for your issue, it's well-targeted but could benefit from a few improvements to reflect the desired changes more clearly. Please consider the following updates:

Button positioning: All buttons should appear at the top left in a consistent order.
Favorite button: Replace the old button with a heart icon that toggles between alpha white and red when clicked to indicate favoriting.
Author over the image: The author should appear at the bottom right of the picture.
Link copy button: Add a link icon that changes from alpha white to solid white on hover, indicating it’s interactive.
Translucent box: add a translucent box to facilitate the contrast of the icons and delimitate.
Remove old buttons: Make sure to remove any outdated or redundant buttons as part of the update.
Here is a reference for how the updated UI should look:

Diseno.sin.titulo.mp4

Feel free to reach out if you need more details! Thanks for your efforts.