底栏按钮放大动画 组件V3

普通说明

该版式组件为lanbaoshi1145制作，任何制作版式人员可使用下方代码直接插入至版式页面以便快速使用。

[[include :backrooms-to-dv:component:better-hover-button-grow]]

或

[[include :backrooms-to-dv:component:better-hover-button-grow
|参数名=a
|自定义参数=按组件下方说明使用。
]]

普通参数

ru:当放大时按钮会变成圆角。

allru:按钮无论放大不放大都有圆角。

自定义

自定义参数

cusru:按钮四个角的圆角半径。使用前请先加入ru或allru其中一参数，默认值为3px，要使用请填入：|cusru=圆角半径，如:3px

CSS

组件提供的CSS变量如下¹:

:root {
--cus-nohover-background-color: 正常状态下的底栏按钮背景rgb颜色。
--cus-nohover-color: 正常状态下的底栏按钮文字rgb颜色。
--cus-hover-background-color: Hover状态下的底栏按钮背景颜色。
--cus-hover-color: Hover状态下的底栏按钮文字颜色。
--cus-hover-box-shadow-color: Hover状态下的Box-shadow颜色，推荐与底栏按钮背景颜色一致，否则会影响图标部分的背景颜色。
}

ps:这个组件不仅是放大，还有缩小。

Footnotes

1. 颜色只能用rgb，如果你用CSS变量也是可以的。