【小程序】按钮button示例

 1、button.wxml

<view>

<swiper class="banner" indicator-dots="true" indicator-color="0,0,0,0.8"
indicator-active-color="white"
autoplay="true"
interval="1500"
circular="true" >
    <swiper-item>
        <image src="/pages/images/b1.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image src="/pages/images/b2.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image src="/pages/images/b3.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image src="/pages/images/b4.jpg"></image>
    </swiper-item>
</swiper>
<!-- 底部置顶按钮 -->
<button id="full">底部按钮</button>
<view style="height:50px;"></view>

<!-- 线框按钮 -->
<button id="btn_1">
线框按钮
</button>

<!-- 背景按钮 -->
<button id="btn_2">
背景按钮
</button>

</view>

2、button.wxss

/* pages/index/swiper.wxss */
.banner {
    width:100%;
    height:156px;
}
.banner image{
width:100%;
height:100%;
}

/* 底部置顶按钮 */
#full{
height: 50px;
width: 100%;
background-color: rgb(50, 148, 110);
font-size: 22px;
color: white;
text-align: center;
position:fixed;bottom:0;
}
/* 线框按钮 */
#btn_1{
    width: 200px;
    height: 50px;
    border:1px rgb(21, 141, 91) solid;
    border-radius: 5px;
    color:rgb(23, 133, 96);
    line-height: 28px;
    margin-bottom: 20px;

}
/* 背景按钮 */
#btn_2{
    width: 200px;
    height: 50px;
    border:0px rgb(21, 141, 91) solid;
    border-radius: 5px;
    color:rgb(255, 255, 255);
    background-color: rgb(29, 122, 79);
    line-height: 28px;
}