3-column preview card component with html and css only

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.

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.

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🔥🔥💯