写一个网页有四个大按钮第一个按钮是纵向由红变白的渐变色背景第二个按钮是QQ的那个企鹅图案第三个按钮是纵向由红变白的渐变色背景加上QQ的那个企鹅图案第四个按钮是蓝变白的渐变色背景显示标题是功能
<p>选择</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>功能选择</title>
<style>
body{
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.btn{
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
margin-bottom: 20px;
border-radius: 10px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.btn1{
background: linear-gradient(to bottom, #ff4d4d, #ffffff);
}
.btn2{
background: url("https://cdn.iconscout.com/icon/free/png-256/qq-189-721977.png") no-repeat center center;
background-size: contain;
}
.btn3{
background: linear-gradient(to bottom, #ff4d4d, #ffffff), url("https://cdn.iconscout.com/icon/free/png-256/qq-189-721977.png") no-repeat center center;
background-size: contain;
}
.btn4{
background: linear-gradient(to bottom, #4d4dff, #ffffff);
}
.btn:hover{
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="container">
<div class="btn btn1">按钮1</div>
<div class="btn btn2">按钮2</div>
<div class="btn btn3">按钮3</div>
<div class="btn btn4">按钮4</div>
</div>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/bnlZ 著作权归作者所有。请勿转载和采集!