微信小程序默认按钮无边框且设置圆角和背景色

wxss

.icon-btn {
  vertical-align: middle;
  margin-top: 2px;
  margin-bottom: 0px;
}

.icon {
  color: black;
}

/* 默认按钮样式 */

button[type="default"] {
  border-radius: 6px 6px 0px 0px;
  background-color: whitesmoke;
}

/* 默认按钮无边框 */

button[type="default"]::after {
  border: none;
}

wxml

<button class='icon-btn' type="default" size="mini">
  <i-icon class='icon' size="20" type="add" />
</button>

效果图

解释说明:

button[type="default"]::after 这个伪类意思是只设置type为default的按钮样式,中括号中间还可以换成其他特征属性

微信按钮的边框是在after伪类中,只有在此伪类中将边框改为none才生效