Tanay-ErrorCode / lupo-skill

https://lupo-skill.web.app/

24 stars 75 forks source link

Added hover effect on "star on GitHub" and "contribute Now" button on homepage #234

Closed Monika5S closed 2 weeks ago

Monika5S commented 2 weeks ago

What kind of change does this PR introduce? Hover Effect are added to the start on github and contribute now button on the homepage similar to as of Template card hover. It's done by adding borderStyleChange prop to custom button and a class to style the border on button component which toggles as per mouseEnter and mouseLeave event, A new button.css is applied to make animated border style.

Issue Number:

224

Fixes #224 Snapshots: Before Hover

After Hover

Similar effect is added on contribute now button as well!

Tanay-ErrorCode commented 2 weeks ago

@Monika5S Please provide a screen recording of the output.

Monika5S commented 2 weeks ago

@Tanay-ErrorCode Here's the recording!

https://github.com/Tanay-ErrorCode/lupo-skill/assets/92215187/db3f5639-8cb4-4ecc-885a-307d236e09a7

Tanay-ErrorCode commented 2 weeks ago

@Monika5S Please make the following changes.

Do not change the color of the button neither on hover nor on no hover
Please make the hover effect like that of testimonial cards.

https://github.com/Tanay-ErrorCode/lupo-skill/assets/90561803/6d9d7d0f-b70e-4d3e-8c8d-52cee95c7be3

Tanay-ErrorCode commented 2 weeks ago

@Monika5S Please use the same colors and speed of rotation as in testimonial card hover.

linear-gradient(290.7deg,rgb(255, 242, 0), rgb(0, 172, 249) 100.2%)

Monika5S commented 2 weeks ago

@Tanay-ErrorCode I've updated the speed and made changes to implement above said gradient here's the output:

https://github.com/Tanay-ErrorCode/lupo-skill/assets/92215187/0d369f3a-4a63-4fdd-b14b-7f7b8e4abe28

Kindly review it. Thanks!

Tanay-ErrorCode commented 2 weeks ago

@Monika5S Please see the difference between the hover effects of card and button. Please make it similar to card hover effect.