Transition: 2s not working

Coding Help
1

The related URL is neumorphing.glitch.me/login.html

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?

2

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

1 Like
3

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.

4

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

          <button
        type="submit"
        class="btn"
        onclick="window.location='/File_name.html';"
      >
        Text to Display here
      </button>

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

class=“btn”

Before the
First > to Apply The CSS Code