html – Effects when clicking a button

Question:

I would like to know how I can add an effect when clicking a button, I am using HTML5 and CSS.

I add an effect with :HOVER, that as soon as the mouse is positioned over the button its background is changed, however I would like an effect that when clicking on the button the color change effect is activated.

Thanks!

Answer:

in that case you will have to use JavaScript. Try applying the following code.

<style>
    button{
        border: 0;
        padding: 35px 50px;
        font-weight: bolder;
        color: #fff;
    }
</style>
<script>

function mudaCor(el){
    el.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
}

</script>


<button onclick="mudaCor(this)">Clique</button>

In case the JavaScript function is getting a random color, if you want a standard color, just change the hexadecimal code. See the example below.

el.style.backgroundColor = '#069';