我已经使用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%);
}

09-25 17:00