CODEWITHSUNDEEP
htmlcss
deepika
deepika

Reputation: 29

How to adjust the color with rgb value?

I have created login form using html5 and css3.

Here is my html5 code for login form:

<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 -->

Here is my jsfiddle: http://jsfiddle.net/q4bvL9mw/1/

I want to change the login button as black and hover state will be silver color.

May i know where is the exact place can i adjust the color properties.

Can anyone help me? thanks in advance.

Upvotes: 0

Views: 67

Answers (2)

Weafs.py
Weafs.py

Reputation: 22992

[Edited]

Try this:

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

Upvotes: 0

Tiago Barreto
Tiago Barreto

Reputation: 822

You should be change the color properties in your css.

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

Its works for me. See in the action JS Fiddle

For border and shadow effects buttons modify only last parameter rgba, the value is the Alpha Channel.

Upvotes: 3

Related Questions