用户登录

NinghaoNgCamp:用过 Angular 才知道它有多强大。了解详情 / 报名参加 →

创建一个样式文件 .. 放在 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 ...

再去预览一下 ..

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

按钮的样式《 微信小程序:案例 》

统计

10872
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点