效果图
button点击效果图
难点解析
1.按钮渐变属性：linear-gradient( 135deg, #FAB2FF 10%, #1904E5 100%)，意思为线性渐变，135的倾斜度，渐变的色号和透明度。
2.hover状态下渐变色变化：background-size: 200%;要将背景大小设置为200%；background-position: right; 然后hover状态时，进行位移。
CSS代码样式
<style>
*{
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);
}
</style>
Html代码样式
<body>
<section class="btn">
<button >Button 1</button>
<button >Button 2</button>
<button >Button 3</button>
</section>
</body>
网友评论