Axure入门3：用矩形来做一个按钮

很多人通过消息留言表示已经迫不及待地开始进一步的学习了，因为入门系列无法满足实际工作中的需求，于是我决定并行开始写进阶、高级及实例系列了。

通过本文章你可以学到样式、交互样式、交互事件的基本应用，为进阶及高级打下基础。文末的小技巧可以令你跟前端沟通时更专业。

1、基本样式

拖放一个矩形1到页面，然后在右边的“检视”中切换到样式页面，选中矩形并把宽度、高度分别设为：64、26，圆角半径设为5。为了更像一个按钮，我们在矩形1中用12号字体打上“确定”两个字。

设置完成后的矩形如下：

接下来给矩形填充背景色：选中后点击样式中的填充，在弹出的拾色器中用吸管工具获取上面“样式”中的蓝色作为按钮默认背景色。

然后把矩形字体改为白色，并把边框去掉。

完成上述操作后的效果。

2、交互样式 - 设置鼠标悬停时的响应效果

在矩形上点右键，点击弹出菜单中的“交互样式”，在弹出的交互样式设置窗口可以根据需要设置鼠标在矩形上悬停时的样式。这里以改变背景色为例，把“填充颜色”打上勾，然后点击颜色选取框选取与矩形默认背景色一样的颜色，然后通过取色框中的“更多”按钮调出颜色板并把最右边的小三角向上拖动，把颜色深度调低。

完成后预览，在浏览器中把鼠标移到矩形即可看到效果。

3、交互事件

接下来为这个按钮设置一个点击事件，让它工作起来。

选中矩形后在右边“检视”栏从“样式”切换到“属性”，然后双击“鼠标单击时”，在弹出的设置窗口中点击左边的“链接” -> “打开链接”，接着选中右边的“链接到URL或文件”，在超链接一栏中随便输入一个网址，确定退出。

切换到浏览器，刷新预览页面，然后点击按钮就可以看到浏览器打开了指定的网页，按钮制作完成。

小技巧：

如果你有细心留意的话，应该已经发现了按钮的文字距离上下边缘有细微的不对称，这种情况是由于不同字体的长宽比例不同造成的，解决起来也简单：把按钮的高改成单数，如：把上面的按钮高度改成27像素。