写一个完整的网页有四个大按钮长为200宽为200第一个按钮是纵向由红变白的渐变色背景第二个按钮是QQ的那个企鹅图案第三个按钮是纵向由红变白的渐变色背景加上QQ的那个企鹅图案。第四个按钮是蓝变白的渐变色背景显示文字是功能
<p>按钮。</p>
<!DOCTYPE html>
<html>
<head>
<title>四个大按钮</title>
<style type="text/css">
button {
width: 200px;
height: 200px;
border: none;
border-radius: 50%;
margin: 10px;
font-size: 24px;
color: #fff;
font-weight: bold;
text-align: center;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
#btn1 {
background: linear-gradient(to bottom, #f00, #fff);
}
#btn2 {
background-image: url('https://cdn.icon-icons.com/icons2/836/PNG/512/QQ_icon-icons.com_66781.png');
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
}
#btn3 {
background: linear-gradient(to bottom, #f00, #fff), url('https://cdn.icon-icons.com/icons2/836/PNG/512/QQ_icon-icons.com_66781.png');
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
}
#btn4 {
background: linear-gradient(to bottom, #00f, #fff);
}
</style>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">功能按钮</button>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bnQN 著作权归作者所有。请勿转载和采集!