Friday, 15 August 2014

html5 - How to adjust the color with rgb value? -



html5 - How to adjust the color with rgb value? -

i have created login form using html5 , css3.

here html5 code 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 jsfiddle: http://jsfiddle.net/q4bvl9mw/1/

i want alter login button black , hover state silver color.

may know exact place can adjust color properties.

can help me? in advance.

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

html5 css3

No comments:

Post a Comment