我已经使用html5和css3创建了登录表单。
这是我的登录表单的html5代码:
<section id="content">
<form action="">
<h1>Login Form</h1>
<div>
<input type="text" placeholder="Username" required="" id="username" />
</div>
<div>
<input type="password" placeholder="Password" required="" id="password" />
</div>
<div>
<input type="submit" value="Log in" />
</div>
</form><!-- form -->
</section><!-- content -->
这是我的jsfiddle:http://jsfiddle.net/q4bvL9mw/1/
我想将登录按钮更改为黑色,并且悬停状态将为银色。
我可以知道在哪里可以调整颜色属性。
谁能帮我?提前致谢。
最佳答案
[编辑]
尝试这个:
Fiddle上的演示
CSS:
#content form input[type="submit"] {
background: rgb(254, 231, 154);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(126, 126, 126, 1) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(126, 126, 126, 1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(126, 126, 126, 1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(126, 126, 126, 1) 100%);
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(126, 126, 126, 1) 100%);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8) inset;
-ms-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8) inset;
-o-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8) inset;
border: 1px solid rgb(0, 0, 0);
color: #000;
cursor: pointer;
font: bold 15px Helvetica, Arial, sans-serif;
height: 35px;
margin: 20px 0 35px 15px;
position: relative;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
width: 120px;
}
#content form input[type="submit"]:hover {
background: -moz-linear-gradient(top, rgba(126, 126, 126, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-linear-gradient(top, rgba(126, 126, 126, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: -o-linear-gradient(top, rgba(126, 126, 126, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: -ms-linear-gradient(top, rgba(126, 126, 126, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(top, rgba(126, 126, 126, 1) 0%, rgba(0, 0, 0, 1) 100%);
}