All comments

• 

  MatthewA77• 40

  @MatthewA77

  Submitted 12 months ago

  • I can't find a way to solve the :hover function, its just applying it to the svg element and not the whole button. Can you guys tell me how to fix it?
  • How to improve my css code because I feel that my code is not practical and simple

  

  Product Preview Card Challenge with flexbox

  2

  40

  

  sivin• 350

  @Sivin-Wi

  Posted 12 months ago

  • Code Reformat :

       <div class="btn">
            <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>&nbsp;Add to Cart</button>
         </div>
    

  Important thing : "fa fa-shopping-cart" . take icon from " font awesome 4.7 🤔" icons.

  • Hover Effect:

    .btn> button {
        padding: 1em 4.4em;
        border-radius: 0.5em;
        background-color: hsl(158, 36%, 37%);
         border: none;
        color: hsl(0, 0%, 100%);
       }
    
    btn>button:hover {
        background-color: hsl(169, 38%, 25%);
       cursor: pointer;
    }
    

  • Try to learn FlexBox
  • Try It if it Work or not 🐱

  1

  This comment has received 5 repliesShow