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

系统管理员 2022-02-28 06:44 2217阅读 0赞

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]

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

#### 设置圆角 ####

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

/* 取消默认边框 */
    button::after{  
    	border: none; 
    }
    
    button { 
        margin-top: 20px;
        border-radius: 30px;
    }

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]

#### 设置背景色 ####

如果要更更改小程序背景颜色，需要取消 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);
    }

按钮就变成下图样式：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 2]

#### 小程序交流群 ####

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 3]

--------------------

**推荐阅读**

[快速上手小程序布局][Link 1]

[小程序云开发之初体验][Link 2]

[骚操作：提高小程序开发效率][Link 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 4]

--------------------

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

![在这里插入图片描述][20190315083734931.jpg]  
关注公众号『嗜码』。回复关键字「前端」、「Python」、「Java」、「Android」、「小程序」、「Vue」等获取免费精品学习资料。  
![在这里插入图片描述][20190315083756375.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70]: /images/20220228/246c6f1e8b3a4a49ae64c10dc84b2b8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 1]: /images/20220228/0d528ba286f74420b11494c35debc074.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 2]: /images/20220228/49d8a52ba31c4b739a91519c3898b7c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 3]: /images/20220228/cbdf1bc0990540498e70d6ee800fa386.png
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzIyNDQzMDAwNg==&mid=2247485006&idx=1&sn=3bbe5ec0f6355552246ffe1d4e0dd1e1&chksm=e80e5497df79dd81161054007525c4f83df101bd07ab20a9046802c8a760316f1e992551f16c&token=1941856223&lang=zh_CN#rd
[Link 2]: https://mp.weixin.qq.com/s?__biz=MzIyNDQzMDAwNg==&mid=2247485045&idx=1&sn=ecb42296973f1a0ac2c34f40d47dd4ec&chksm=e80e54acdf79ddba173c2957bbf7a5f9a08661cb95c1a29412fadf65ce1a0f9790986486da3c&token=1941856223&lang=zh_CN#rd
[Link 3]: https://mp.weixin.qq.com/s?__biz=MzIyNDQzMDAwNg==&mid=2247485028&idx=1&sn=199269c21723211f5c921712fa6004a8&chksm=e80e54bddf79ddabae35258a96ffb873ef1c370b57ab3c4254303661016b0b02432d2f8a0ae4&token=1941856223&lang=zh_CN#rd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTU0MDg2_size_16_color_FFFFFF_t_70 4]: /images/20220228/64bfc350b4504fa9a9a4f69db60c5143.png
[20190315083734931.jpg]: /images/20220228/115af037373644699673fb5d7a85308c.png
[20190315083756375.png]: /images/20220228/c95d10a6e9db43a6afcf1abd1bf7edd3.png