四个大按钮网页设计 - 红白渐变，QQ企鹅图案，蓝色渐变 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>四个大按钮网页设计 - 红白渐变，QQ企鹅图案，蓝色渐变</title>
	<style type="text/css">
		.button {
			width: 200px;
			height: 200px;
			border: none;
			cursor: pointer;
			font-size: 20px;
			font-weight: bold;
			color: #fff;
			text-align: center;
			line-height: 200px;
			transition: background-color 0.5s;
		}
<pre><code>	.button.gradient-red-white {
		background: linear-gradient(to bottom, #ff0000, #ffffff);
	}

	.button.gradient-blue-white {
		background: linear-gradient(to bottom, #0072c6, #ffffff);
	}

	.button.qq-logo {
		background: url(https://img1.baidu.com/it/u=1078775905,2521477726&amp;fm=26&amp;fmt=auto&amp;gp=0.jpg) no-repeat center center;
		background-size: contain;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div>
		<button class="button gradient-red-white">按钮1</button>
		<button class="button qq-logo"></button>
	</div>
	<div>
		<button class="button gradient-red-white qq-logo">按钮2</button>
		<button class="button gradient-blue-white">功能按钮</button>
	</div>
</body>
</html>