I copied some code from w3schools for a read more button but the transition is too quick, how can I make the transition slow and smooth probably with CSS, here's the link

Don't know how to go about it

CodePudding user response：

I'm guessing you want a different style on hover. One way to add style transitions is by using CSS and the transition property.

The transition-property CSS property sets the CSS properties to which a transition effect should be applied.

MSDN Article

.button {
  background-color: gray;
  transition: background-color 200ms ease;
}

.button:hover {
  background-color: red;
}

CodePudding user response：

if you want to change more button style from display: none to display: inline, there's no transition for this case.

you can use visibility and opacity instead of display property transition:

.element {
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}
.element_active {
opacity: 1;
visibility: visible;
}