Home/ Questions/Q 7404399
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:15:01+00:00

I’m trying to get working code for my button. It’ll be used to connect/disconnect.

  • 0

I’m trying to get working code for my button. It’ll be used to connect/disconnect. I have 4 buttons already designed.

Basic Connect Button: Button which’ll be shown when the page opens.

Connect Button Hover Effect: Another button, will be activated when the mouse hovers over it. Its almost the same just the text is bolder & the color is more dark.

Connected button (Active): When clicked it should remain on this state, like when we click on connect button it should be changed to connected & remain active.

Now if we hover over it on connected state it should show disconnect button as hover at that time & then back to normal if clicked again which means it was disconnected.

My code is as follows:

<html>
<head>

<title></title>

<script type="text/javascript" src="script/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
   $('.button').click(function() {

    $(this).toggleClass('button1').toggleClass('active');

});   
});




</script>   

<style type="text/css">

a.button {
    background-image:url(img/button_light.png);
    width: 123px;
    height: 43px;
    display: block;
    text-indent: -9999px;

}

a.button:hover {
        background-image:url(img/butto_mouseover.png);
    width: 123px;
    height: 43px;
}

a.button:active { 
        background-image:url(img/button_clicked.png);
    width: 123px;
    height: 43px;
}


a.button1:hover { 
    background-image:url(img/button_disconnect.png);
    width: 123px;
    height: 43px;
}

</style>



</head>
<body>
<a class="button" href="#" ></a>

</body>
</html>

Can any body help me in this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    :active is a psuedo class selector that is applied automatically when the user is holding down the mouse button on the element and removed when you let go. You would need to change a.button:active to a.button.active for your javascript to work.

    • 0