小程序实现好看的圆角按钮

Tips | 小程序实现好看的圆角按钮

在微信小程序的开发当中，按钮是经常会使用到的组件。

微信自带的按钮组件给出了三中样式，分别是 primary、default 以及 warn，对应的颜色分别是绿色、白色和红色。

为了界面的美观，配合 UI 设计，我们通常需要修改原始按钮的 css 样式，下面教大家如何将按钮改成圆角矩形。

设置圆角

首先，需要将默认的按钮边框样式取消，然后设置按钮的的弧度，css 如下：

/* 取消默认边框 */
button::after{ 
	border: none; 
}

button {
    margin-top: 20px;
    border-radius: 30px;
}

按钮就变成了下图的样式：

设置背景色

如果要更更改小程序背景颜色，需要取消 button 组件中的 type 属性，然后在 css 中添加相关背景颜色。

wxml 代码如下：

<button class='btn1'>Button1</button>
<button class='btn2'>Button2</button>
<button class='btn3'>Button3</button>

css 代码如下：

.btn1 {
  background: #457fca; 
}

.btn2 {
  background: #F15F79; 
}

.btn3 {
   /* 渐变色 */
  background: linear-gradient(to right, #f7b733, #fc4a1a);
}

按钮就变成下图样式：

小程序交流群

最近很多人加我微信问我小程序方面的问题，有时候来会不及回复。这里干脆就拉了个小程序的交流群，大家有问题发在群里，相互讨论一下。

最后，公众号将小程序的相关教程整理了一下，放在了菜单栏，大家点击即可查看。

---

推荐阅读

快速上手小程序布局

小程序云开发之初体验

骚操作：提高小程序开发效率

---

欢迎加我微信，一起交流，互相学习，共同进步！

关注公众号『嗜码』。回复关键字「前端」、「Python」、「Java」、「Android」、「小程序」、「Vue」等获取免费精品学习资料。