创建一个样式文件 .. 放在 styles 下面，名字是 button.wxss .. 打开小程序的主样式 .. 用 import 导入刚才我们创建的 button 这个样式文件 .. 再回到这个样式文件 ...

添加一个 .button .. 先把它变成 inline-block 类型的元素 .. display: inline-block ..

小程序里的按钮都有个边框 .. 要去掉它可以这样 .. .button::after .. 设置一下按钮的 after 伪元素的样式 .. 把 content 设置成 none ..

再继续去设计按钮的样式 .. 用 margin 添加点外边距，大小是 4 个像素 .. 再用 background 设置一下背景颜色，颜色的值是 #e0e1e2 ..

然后用 padding 在按钮的内部添加点内边距 .. 上下是 0，左右是 24px .. 接着再用 color 设置一下文字的颜色 .. 用 rgba 表示，颜色是黑色 .. 不透明度设置成 0.6 ..

添加一个 font-weight，值是 bold，让文字加粗显示 .. border-radius 可以设置成 1 像素 .. font-size 是 32rpx ...

可以再添加一个 transition，过渡的效果 ，时长是 0.3s ，支持所有的属性 ..

我们再单独设置一下带 primary 类的按钮 .. .button.primary .. 把背景设置成黑色 .. 文字的颜色是白色 .. 不透明度是 0.9 ..

按一下按钮会应用 .button-hover 类里的样式 .. 添加一个类选择器 .. 里面可以把 opacity 设置成 0.8 ...

再去预览一下 ..

按一下按钮 .. 会有一个过渡效果 ...