如何用rgb值调整颜色？

Question

我使用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/

我想将登录按钮更改为黑色，悬停状态为银色。

我可以知道在哪里可以调整颜色属性。

任何人都可以帮助我吗？提前谢谢。

Answer 1

您应该更改css中的颜色属性。

#content form input[type="submit"] { background: rgba(0,0,0,1); }
#content form input[type="submit"]:hover { background: rgba(204,204,204,1); }

它适合我。请参阅操作JS Fiddle

对于边框和阴影效果按钮，仅修改最后一个参数rgba，该值为Alpha通道。

Answer 2

[被修改]

试试这个：

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%);
}