background
A button often has 4 states.
- Default state
- hover
- mouse pressed
- disabled state
In order to represent these 4 states, 4 colors need to be set to prompt the user.
There are generally 5 button types:
Taking the primary type button as an example, set its colors in different states:
<button class="btn type--primary">Primary</button>
<style>
.btn {
width: 100px;
height: 40px;
border: none;
border-radius: 5px;
}
.btn.type--primary {
/* 基础色 */
background-color: #409eff;
color: #ffffff;
/* hover */
&:hover {
background-color: #79bbff;
}
/* 鼠标按下 */
&:active {
background-color: #337ecc;
}
/* 禁用状态 */
&:disabled {
background-color: #a0cfff;
}
}
</style>
One button requires 4 colors, and 5 types of buttons are 20 colors. Obviously, it is very troublesome to design these 20 colors. (If a designer directly provides the designed color, then define the variable and use it directly.)
Therefore, we hope that we only need to set a basic color for the button, and the colors of other states can be automatically generated based on this basic color.
sass adjust color brightness
The colors of the different states of the button actually modify the brightness of the button's basic color. for example:
- Hover means the base color becomes a little brighter.
- active means the base color becomes darker
- Disabled means that the base color is a little brighter than hover, and the text is also brighter.
Sass provides tool functions to easily modify the brightness of colors.
Introducing the sass color module, which contains many practical utility functions.
@use sass:color
But we don’t need to introduce it here. Because we mainly use the brightening and darkening functions in the color function. These two functions have become global and can be used directly.
- Brighten:
lighten(颜色, 百分比) - darken:
darken(颜色, 百分比)
.btn {
width: 100px;
height: 40px;
border: none;
border-radius: 5px;
}
.btn.type--primary {
$primary-color: #409eff;
$primary-text-color: #ffffff;
color: $primary-text-color;
background-color: $primary-color;
&:hover {
background-color: lighten($primary-color, 10%);
}
&:active {
background-color: darken($primary-color, 10%);
}
&:disabled {
background-color: lighten($primary-color, 20%);
color: lighten($primary-text-color, 40%);
}
}
Advanced: Loop Optimization
The code above using the primary type button as an example has achieved the goal of automatically generating other status colors. But we can also use loop optimization to avoid having to write the above code repeatedly for each button type.
$var: (key: value): Bracket definition object (map)map-keys: Returns an array (list) composed of keys, similar to Object.keys()@each ... in ...: Traverse the array, similar to the array high-order function map#{}: Interpolation expression, similar to template string
<button class="btn type--primary">Primary</button>
<button class="btn type--success">Success</button>
<button class="btn type--warning">Warning</button>
<button class="btn type--danger">Danger</button>
<button class="btn type--info">Info</button>
<style lang="scss">
.btn {
width: 100px;
height: 40px;
border: none;
border-radius: 5px;
}
/* 定义按钮类型颜色对象 */
$btn-color-map: (
primary: #409eff,
success: #67c23a,
warning: #e6a23c,
danger: #f56c6c,
info: #909399
);
/* 生成 .btn.type--primary{}，.btn.type--success{} 等样式选择器下的样式 */
@each $type in map-keys($btn-color-map) {
$btn-color: map-get($btn-color-map, $type);
.btn.type--#{
$type} {
$bg-color: $btn-color;
$text-color: #ffffff;
color: $text-color;
background-color: $bg-color;
&:hover {
background-color: lighten($bg-color, 10%);
}
&:active {
background-color: darken($bg-color, 10%);
}
&:disabled {
color: lighten($text-color, 40%);
background-color: lighten($bg-color, 20%);
}
}
}
</style>
Complete code
The main functions have been implemented, here we just add the general style of the button.
/*************** start ****************/
/* 按钮全局样式，包括5中类型 */
/*********************************** */
.btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 8px 15px;
margin-left: 12px;
font-size: 14px;
font-weight: 500;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: middle;
appearance: none;
cursor: pointer;
user-select: none;
border: 1px solid #dcdfe6;
border-radius: 5px;
outline: none;
transition: .1s;
}
/* 定义按钮类型颜色对象 */
$btn-color-map: (
primary: #409eff,
success: #67c23a,
warning: #e6a23c,
danger: #f56c6c,
info: #909399
);
/* 生成 .btn.type--primary{}，.btn.type--success{} 等样式选择器下的样式 */
@each $type in map-keys($btn-color-map) {
$btn-color: map-get($btn-color-map, $type);
.btn.type--#{
$type} {
$bg-color: $btn-color;
$text-color: #ffffff;
color: $text-color;
background-color: $bg-color;
border-color: $bg-color;
&:hover {
background-color: lighten($bg-color, 10%);
}
&:active {
background-color: darken($bg-color, 10%);
}
&:disabled {
color: lighten($text-color, 40%);
background-color: lighten($bg-color, 20%);
}
}
}
/*************** end ****************/