CSS：实现简单的圆角矩形按钮

效果：
代码：
<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>圆角按钮</title>
		<style type="text/css">
			.round_button {
				border: 1px solid;
				display: block;
				font: bold 12px/25px Arial, sans-serif;
				text-decoration: none;
				text-align: center;
				font-size: 1em;
				line-height: 50px;
				width: 100px;
				height: 50px;
				margin: 10px;
				-webkit-border-radius: 15px;
				-moz-border-radius: 15px;
				/* Old Firefox */
				border-radius: 15px;
				-webkit-transition: all 0.15s ease;
				-moz-transition: all 0.15s ease;
				-o-transition: all 0.15s ease;
				-ms-transition: all 0.15s ease;
				transition: all 0.15s ease;
			}
			
			.green {
				color: #3e5706;
				background: #a5cd4e;
				/* Old browsers */
				background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
				/* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5cd4e), color-stop(100%, #6b8f1a));
				/* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
				/* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
				/* Opera 11.10+ */
				background: -ms-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
				/* IE10+ */
				background: linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
				/* W3C */
			}
			
			.blue {
				color: #19667d;
				background: #70c9e3;
				/* Old browsers */
				background: -moz-linear-gradient(top, #70c9e3 0%, #39a0be 100%);
				/* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #70c9e3), color-stop(100%, #39a0be));
				/* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #70c9e3 0%, #39a0be 100%);
				/* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #70c9e3 0%, #39a0be 100%);
				/* Opera 11.10+ */
				background: -ms-linear-gradient(top, #70c9e3 0%, #39a0be 100%);
				/* IE10+ */
				background: linear-gradient(top, #70c9e3 0%, #39a0be 100%);
				/* W3C */
			}
			
			.round_button:hover {
				-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .3), inset 0px 0px 2px rgba(0, 0, 0, .5);
				-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .3), inset 0px 0px 2px rgba(0, 0, 0, .5);
				box-shadow: 1px 1px 1px rgba(0, 0, 0, .3), inset 0px 0px 2px rgba(0, 0, 0, .5);
			}
			
			.round_button:active {
				-webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .7);
				-moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .7);
				box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .7);
			}
		</style>
	</head>

	<body>
		<input type="button" value="注册" class="round_button green" />
		<a href="#" class="round_button blue">登录</a>
	</body>

</html>
CSS：实现简单的圆角矩形按钮

猜你喜欢
