How can I "highlight" this CSS button when is clicked using CSS3 or JavaScript?

into an HTML page I have 2 buttons implemented by something like this:

<!-- Bottone relativo ai progetti WIFI: -->
<a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}" class="showWifi">
    <div class="news_box news_box_01 hvr-underline-from-center " style="margin-right: 50px;"></div>
</a>

<!-- Bottone relativo ai progetti PNSD: -->
<a title="PNSDe" href="javascript: void(0)" id="showPnsd_${item.index}" class="showPnsd">
    <div class="news_box news_box_02 hvr-underline-from-center "></div>
</a>

And this is the related CSS that show a background immage to the div implementing the button:

.news_box_01 {
    background: rgba(0, 0, 0, 0) url("../../img/icons/projects/wifi_big_transparent_2.png") repeat scroll 0 0;
}

.news_box_02 {
    background: rgba(0, 0, 0, 0) url("../../img/icons/projects/PNSD.png") repeat scroll 0 0;  
}

Ok, now my problem is that I have to highlight the selected button when the user click on it.

I know that I can use the :active selector to select a clicked link. The problem is that I don’t know how can I use CSS to “hightlight” (or implement some other CSS 3 effect) on the backround immage when the link is clicked

Do you have some idea?


Source: html

Leave a Reply