Themeable Button Hover
Posted: Tue Jan 16, 2024 7:21 pm
Looking at the template "Future City" it has a neat feature using a sticky layer and themeable buttons which appear on the right side of the screen.
The buttons use a right side padding value of 48 so that only the left side of the button appears. Then "hover" triggers a transform transition which shows the entire button.
I'm missing how this happens. In the themeable button properties dialog there is no animations tab. I could find no additional HTML that was added in the button object or for the page. And there's no defined style that would also trigger the hover. And yet looking at the CSS file for the page, it's clearly there:
#ThemeableButton2:hover
{
transform: translate(-100px,0px) rotate(0deg) ;
transition: transform 500ms ease-out 0ms;
}
To test this further I created a completely new, blank website and copied and pasted just one of the buttons, with no other elements on the page. Same behavior.
What am I missing?
The buttons use a right side padding value of 48 so that only the left side of the button appears. Then "hover" triggers a transform transition which shows the entire button.
I'm missing how this happens. In the themeable button properties dialog there is no animations tab. I could find no additional HTML that was added in the button object or for the page. And there's no defined style that would also trigger the hover. And yet looking at the CSS file for the page, it's clearly there:
#ThemeableButton2:hover
{
transform: translate(-100px,0px) rotate(0deg) ;
transition: transform 500ms ease-out 0ms;
}
To test this further I created a completely new, blank website and copied and pasted just one of the buttons, with no other elements on the page. Same behavior.
What am I missing?