3-column preview card component with html and css only

Community feedback

• 

  P

  Markus•90

  @MarkusB2611Posted almost 2 years ago

  Hello,

  looking good :)

  I would apply the border directly to your .button class and then only change background and color on hover. That way it does not jump around on hover.

  Marked as helpful

  2
• 

  Siva•210

  @sivakumarsPosted almost 2 years ago

  Hi, @pardaeva.

  In addition to the above solutions which will fix your problem, you can also consider the following property.

  You can use the outline property for the a.button.btn:hover class instead of the border property.

  Applying border to any element affects the dimensions or contents of that element, whereas outline property doesn't.

  .a.button.btn:hover {
             background-color: transparent;
             color: var(--clr-neutral-100);
             //border: 2px solid var(--clr-neutral-100);    << Instead of border,
             // outline: 2px solid var(--clr-neutral-100);   <<  you can use this outline
             cursor: pointer;
  }
  

  I hope this answers this question.

  Marked as helpful

  0
• 

  S MD suleman•3,530

  @sulemaan7070Posted almost 2 years ago

  hey pardaeva 😄, congratulations on completing the challenge I have Inspected your code and noticed that you have used a tag for learn more instead of button element...regarding the scaling issue you can do something like this...you can tackle the problem this way

  .first button {
    background-color: hsl(0, 0%, 95%);
    border: none;
    **padding: 20px 50px;**
    border-radius: 40px;
    color: var(--Bright-orange);
  }
  .first button:hover {
    background-color: var(--Bright-orange);
    border: 2px solid white;
    color: white;
    **padding: 18px 48px;**
  }
  
  

  have a close look at padding at both hover and non-hover states you will figure out what is happening.. let me know if you need further help happy coding🔥🔥💯

  Marked as helpful

  0