CSS表单按钮样式

最新推荐文章于 2024-06-24 10:48:58 发布

宣讯

最新推荐文章于 2024-06-24 10:48:58 发布

阅读量4.1k

点赞数 1

分类专栏： css

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		/* 最外层div */
		.div1 {
			width: 800px;
			height: 800px;
			max-height: 400px;
			max-width: 400px;
			/* background-color: #eee; */
			left: 50%;
			position: absolute;
			margin-left: -200px;
			top: 50%;
			margin-top: -200px;
		}
		/* 确认div型按钮 */
		.div2 {
			float: left;
			width: 100px;
			height: 40px;
			background: -webkit-linear-gradient(left top, red,blue);
			border-radius:10px;
			font-size:17px;
			line-height: 38px;
			color:white;
			letter-spacing: 2px;
			text-align: center;
			-webkit-box-shadow: inset 0 0 20px rgb(176,228,14,0.9);
			padding: 2px;
			cursor: pointer;
		}
		.div2:hover{
			background: -webkit-linear-gradient(top left,blue,red);
			font-size: 14px;
		}
		/* 取消button按钮 */
		button {
			float: left;
			width: 107px;
			height: 46px;
			border-radius:28px;
			background: -webkit-linear-gradient(#3799D6,#fcfaf6);
			font-size:17px;
			line-height: 38px;
			color:white;
			letter-spacing: 2px;
			text-align: center;
			outline: none;
			cursor: pointer;
		}
		button:focus{
			background: -webkit-linear-gradient(#177bba,#fcfaf6);
		}
		button:hover{
			background: -webkit-linear-gradient(#177bba,#fcfaf6);
			border: 1 px solid white;
		}
		/**
		 * 连接按钮
		 */
		a{
			width: 100px;
			height: 40px;
			background: #177BBA;
			border-radius:10px;
			font-size:17px;
			line-height: 38px;
			color:white;
			letter-spacing: 2px;
			text-align: center;
			padding: 2px;
			cursor: pointer;
			text-decoration: none;
			/* a是行内元素,所以要变成块级元素,block为另起一行,inline-block为变为行内块级元素,
			  clear清除左右浮动才能设置block
			 */
			clear: both;
			display: block;
			margin: 87px 0px 0px 0px;
		}
		a:active{
			background: #0d3e83;
			text-decoration: none;
		}
		a:visited{
			background: #0d3e83;
		}
		a:hover{
			background: #177BBA;
			text-decoration: underline;
		}
		a:focus{
			background: #0d3e83;
			text-decoration: none;
		}
		/**
		 * 输入框组
		 */
		input{
			width: 340px;
			height: 40px;
			border-radius:10px;
			font-size:17px;
			color:black;
			font-family: '微软雅黑';
			cursor: pointer;
			outline: none;
			border: 1px solid 	#D8D8D8;
			text-indent: 10px;
		}
		input:hover{
			-webkit-box-shadow: 0 0 6px rgb(176,228,14,0.9);
		}
		/* 请输入按钮 */
		.ipt1{
			margin: 40px auto;
		}
		/* 请输入用户名 */
		.ipt2{
			background:url('img/用户名.png') no-repeat 12px 5px;
			background-size: 30px 30px;
			text-indent:58px;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">确定</div>
		<button type="button">取消</button>
		<a href="javaScript:window.open('http://www.baidu.com');">连接</a>
		<input  type="text" placeholder="请输入" class="ipt1"/>
		<input  type="text" placeholder="请输入用户名" class="ipt2"/>
	</div>
</body>

</html>