Shulou(Shulou.com)06/01 Report--

This article mainly explains "How to customize the style of Weixin Mini Programs (Mini) button components." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "How to customize the style of Weixin Mini Programs (Mini) button components"!

background color

wxml code

determine

wxss code

.btn {

width: 90%;

margin-top: 30rpx;

background-color: #FFCC00;

color: #FFF;

}

Background-color property is to modify the background color, color is to modify the font color, here note: if the component type='.... ', modifying the background color will not work, such as the following code:

determine

button de-border

The button component provided in Mini programs has a border by default. To remove the button border, you only need to add:

.btn::after {

border: 0;

}

Background color when button clicked

wxml code

determine

wxss code

.btn_hover {

background-color: pink;

}

Here, hover-class is the focus, and the documentation for Mini programs explains this attribute as follows:

Type: String

Default: button-hover

Description: Specifies the style class that the button is pressed on. When hover-class='none' there is no click effect.

At this point, I believe you have a deeper understanding of "how to customize the style of Weixin Mini Programs (Mini) button components." You may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.