<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>
写一个完整的网页有四个大按钮长为200宽为200第一个按钮是纵向由红变白的渐变色背景第二个按钮是QQ的那个企鹅图案第三个按钮是纵向由红变白的渐变色背景加上QQ的那个企鹅图案。第四个按钮是蓝变白的渐变色背景显示文字是功能

原文地址: https://www.cveoy.top/t/topic/bnQN 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录