Transition duration and delay

I Need Help
1

Hello! Does anyone know how to make the hover transitions slower? For example, when you press a button to make the change of color much more smoother.

2

Add the following code to the project header, using the code editor in blocs:

 <style>
.btn {transition: color .75s ease-in-out,background-color .75s ease-in-out,border-color .75s ease-in-out,box-shadow .75s ease-in-out;
}
</style>

Original transition time was .15s. Adapt it to your liking.

2 Likes
3

Sweet!!! Thank you so much!
by the way! Where did you get the code?

4

I created a new blocs document, added a simple button (style clean), added the Subclass for Button Clean, edited the background-colour for normal and hover, inspected the html/css code in preview, saw that the transition was applied to the .btn class, the rest is copy and paste :wink: Glad it works for you.

1 Like
5

What the subclass Button clean does?
Yes it works amazing a bit silly blocs doesn’t allow you to do this on the program!

6

I just used the clean button class to apply the background color on normal and hover state, so you can choose the clean style from the Appearance tab on the right. The transition is applied to the .btn class, so it should work on every button style that has colours for normal and hover state applied.

1 Like
7

Im a playing it to a custom class so it works only in the places I want! Thanks a lot for this tip. Super amazing!

8

You can just do this as well

<style>
.btn {transition: all .75s ease;}
</style>

If you want the same thing for all your links

<style>
a {transition: all .75s ease;}
</style>
2 Likes
9

That’s of course even easier. Should’ve known that :wink:

10

Nice!! Thank you! Soon I will have a book with your tips :heart_eyes: