Question

When i click on a button i want it to change color, HOW?

currently it has Black background with white text basicly.

to make it easy for example , i want it to turn blue with white text when i click on it.

How do i do this ?

thank in advance

html code

<form method="post" action="<?=$_SERVER['PHP_SELF'];?>">
<table>
    <tr><td>
    <button onClick="btnSave" id="btnOnclick">Save</button>
    </td></tr>
</table>
</form>

css code

#btnOnclick
{       
        color:#CCC;
        width: 75;
        margin-left: 50px;
        margin-right:auto;
        border: 1px outset #FFF;
        margin-bottom:20px;
        margin-top:10px;
        font-size:15px;

    /*gradient*/
    background:-moz-linear-gradient(top, #000, #333);
    background:-webkit-gradient(linear, left top , left bottom, from(#000), to(#333));

    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;

    /*shadows*/
    box-shadow:3px 3px 10px #000;
    -moz-box-shadow:3px 3px 10px #000;
    -webkit-box-shadow:3px 3px 10px #000;


    }
Was it helpful?

Solution

You should use CSS selector :active for this element: JS Fiddle example

And you should read more about this here: w3schools

all CSS selectors for links:

a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}

OTHER TIPS

js

$('#btnOnclick').click(function(){
    $(this).css({color: 'blue'});
});

DEMO

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top