Back to top button / shrink on hover

Hi there,

you would use a CSS transform property like so:

a.generate-back-to-top:hover {
    transform: scale(0.95);
    transition: transform 0.2s;
}

Thank you. That's what I was looking for.

You're welcome

Hi.

I have another issue with the back to top button. I changed the link colours for the whole site. Now the colours don't fit for the arrow in the back to top button.

Can you tell me what code I have to use to set the colours manually? One for normal and one for hovered...

Many thanks and best regards.

Hi there,

You can control the back to top button's color at customizer > color > back to top.

Hi,

Thank you for your answer. I didn't remember that it is possible to set the colours in customizer. Now I did it. But it doesn't work.

I went to customizer and set the text colour for back to top. In moment I changed the setting there was an effect to the back to top in customizer. I saved the changes, regenerated CSS, deleted cache and checked the result. The changes had no effect.

I went back to the customiser to check the settings again. The right values where set for text colour of back to top but they have no effect. When I change to another value and change back to the colour I want, I can see the change in customizer again. But after saving...CSS...cache... there is no effect to the button.

The problem exists since yesterday when I changed the link colours in Elementor. Is it possible that these settings override the settings in GP customizer? On the other side this makes no sense because before I changed the link colours yesterday the text colour of the back to top was also different to the old link colour settings in Elementor.

As you can read...I'm not a native English speaking person. Perhaps I write a bit complicatet. But I hope you understand...

Hi Emanuel,

I see. Can you provide the link to the site in question? We’ll try to check if Elementor is causing the issue or something else.

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hope to hear from you soon. :)

Hi

Please use the provided link. Bear in mind that this site is online.

Thanks.

Thank you!

Upon checking, I was able to confirm that Elementor indeed is overwriting the color set in the customizer. See: https://share.getcloudapp.com/JruopWP0

What you can do is to add this code through Appearance > Customize > Additional CSS to override the Elementor link color:

a.generate-back-to-top {
    color: #f4f4f4 !important;
}

a.generate-back-to-top:hover {
    color: #f4f4f4 !important;
}

You may replace #f4f4f4 with your preferred color value.

Alternatively, you can also use Global colors through a CSS like this instead:

a.generate-back-to-top {
    color: var(--base-2) !important;
}

a.generate-back-to-top:hover {
    color: var(--base-2) !important;
}

Kindly replace base-2 with the variable name of your Global Color. Global Colors can be seen and created in Appearance > Customize > Colors.

Hope this clarifies!

Thank you. I used the code for additional CSS. Works perfekt.

Best regards

You’re welcome Emanuel!