Transition: 2s not working

The related URL is

I want the button at the very bottom with the tiny infinity logo to smoothly transition into an opposite pointing gradient. For some reason, transition: 2s is not working. Why is this?

#circle {
/* formatting... */
  background-image: linear-gradient(0deg, #bf90ee, pink);
  transition: 2s;

#circle:hover {
  background-image: linear-gradient(#bf90ee, pink);
  transition: 2s;

Do transitions not work for gradients or something?

Ah, nevermind, background-image is non-animatable. To everyone clicking on this thread, big sorry for wasting your time.

1 Like

Just note that 2s is actually a lot of time for a transition, it’s best to use a value between 150ms to 400ms, and you’ll still get good transition effects.

Although this Thread May be a Little Messed up i would Still like to Provide an Example Snippit of code using Transitions

.btn {
  position: initial;
  background-color: #453e61;
  border: 3px;
  color: White;
  padding: 16px 36px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.6s;

.btn:hover {
  background-color: blue;
  color: white;
      font-size: 20px;
   padding: 18px 42px;

Code for the buttons on my site
Edit: Anyone that is curious
This How you use the code for the Button

        Text to Display here

In the Onclick part you can include a function or Just Replace the FIle with the file you want to Load

Edit 2:
In case Anyone wants to Know to use this CSS Code in Anything Just Place


Before the
First > to Apply The CSS Code