html渐变色原理,利用Html + CSS做一个动态渐变色按钮

效果图

button点击效果图

难点解析

1.按钮渐变属性：linear-gradient( 135deg, #FAB2FF 10%, #1904E5 100%)，意思为线性渐变，135的倾斜度，渐变的色号和透明度。

2.hover状态下渐变色变化：background-size: 200%;要将背景大小设置为200%；background-position: right; 然后hover状态时，进行位移。

CSS代码样式

*{

padding: 0;

margin: 0;

list-style: none;

}

.btn{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

text-align: center;

}

.btn button{

margin: 25px;

background-image: linear-gradient( 135deg, #FAB2FF 10%, #1904E5 100%);

border: none;

color: white;

padding: 20px;

width: 200px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 14px;

border-radius: 8px;

cursor: pointer;

background-size: 200%;

transition: 0.6s;

outline: none;

}

.btn button:hover{

box-shadow: 0 10px 20px 0 rgba(47,55,213,0.3);

background-position: right;

transform: scale(1.05);

}

Html代码样式

Button 1

Button 2

Button 3