Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product-Preview-Card-Component

0la-lekan 30

@0la-lekan

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had issues with setting the transition on the "Add to Cart". I will appreciate If I can get help with it.

Community feedback

Toluwaa 1,040

@Toluwaa-o

Posted

Congratulations on completing the challenge. Concerning your question, use something like this:

button { transition: background-color 3s ease; }

button:hover { background-color: /color you want to transition to/; }

The transition property takes 3 parameters. First, the property you want to transition, the amount of time you want the transition to take and lastly, the transition style. You can read more here https://www.w3schools.com/css/css3_transitions.asp

The :hover pseudo selector is used to style an element when you hover over it. For more info, read about it here https://www.w3schools.com/cssref/sel_hover.php

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord