CODEWITHSUNDEEP
javascriptjqueryhtmlcssbutton
Tahir
Tahir

Reputation: 73

4-Stat CSS Javascript Button

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.

Upvotes: 0

Views: 462

Answers (1)

JaredMcAteer
JaredMcAteer

Reputation: 22535

: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.

Upvotes: 1

Related Questions