在《常用样式设置（2）》中，我们实现了一个七牛云的商品卡片。
不过，当鼠标指针进入这个卡片的价格区域时，会出现立即购买的按钮。
一、第1种方式
有一种简单的方法，可以实现这样的交互效果。
那就是，在画布中再放入一个无边框矩形，命名为“购买按钮”，宽度为“284”像素，高度为“40”像素，输入文字“立即购买”。
将元件文字设置为粗体14号字，文字的颜色设置为白色。
将它的颜色设置为[线性]渐变色。
点击颜色设置上的旋转按钮，将渐变更改为左右渐变。
然后，点击色条上左边的圆圈，设置初始颜色，代码为“FBAD14”。
再点击色条上右侧的圆圈，设置终止颜色，代码为“FA8C15”。
完成样式的设置后，将它隐藏。
然后，为带有价格的矩形添加[鼠标移入时][显示][购买按钮]的交互。
并在[更多选项]中添加[弹出效果]，以便鼠标指针离开“购买按钮”时能够自动隐藏“购买按钮”。
二、第二种方式
小楼是个很节俭的人。
所以，做原型的时候能用一个元件做成的事，就不会用两个。
我们接下来，就直接在原有的价格元件上完成同样的视觉效果。
首先，价格元件有两种颜色，肯定会用到交互样式。
既然是鼠标指针进入价格元件时改变颜色，我们就给价格元件添加[鼠标悬停的样式]。
将鼠标悬停时的填充颜色设置为线性渐变色。
颜色设置参考第一种方式中的设置。
温馨提示：如果你不了解交互样式的设置，请参考《Axure的7种交互样式（1）-鼠标的交互样式》。
此时，在浏览器中查看原型的话，鼠标指针进入价格元件时，已经能够看到变色效果了。
但是，文字还没有发生改变。
接下来，我们需要做的是在鼠标进入和离开价格元件时改变元件的文字以及文字的样式。
先为价格元件添加[鼠标移入时]为[当前]元件[设置文本]的交互。
但是，不是将文本设置为默认的[文本]，而是选择设置为[富文本]。
继续点击[编辑文本]按钮，打开编辑文本的窗口。
输入文字“立即购买”，然后划选文字，设置为14号白色文字，并居中对齐。
完成上面的设置之后，继续为价格元件添加[鼠标移出时]为[当前]元件[设置文本]的交互。
同样，将文本设置为[富文本]。
点击[编辑文本]按钮，你会发现编辑区中自动保留了当前元件上的文字与样式。
所以，这一步无需做任何修改，保存设置即可。
到这里，我们就通过不添加任何元件的方式，实现了与第1种方式相同的交互效果。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 动态样式的按钮