<!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>
CSS表单按钮样式
最新推荐文章于 2024-09-02 11:12:33 发布