Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to Get a 4-State Button

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #36425
    tahirk
    Participant

    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:

    =>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>


    =>body

    =>a class="button" href="#" >

    #95810
    Mottie
    Member

    Personally, I’d do it this way.. I added the background colors for this demo:

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

    a.button:hover {
    background: #0f0 url(img/button_mouseover.png);
    width: 123px;
    height: 43px;
    }

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


    a.button.active:hover {
    background: #f00 url(img/button_disconnect.png);
    width: 123px;
    height: 43px;
    }

    And use this code:

    $('a.button').click(function(){
    $(this).toggleClass('active');
    });

    Also, it would save some network traffic if you turned your four images into an image sprite and just change the background position.

    #95882
    tahirk
    Participant

    Hi,

    Thank you all, got it working.


    $(document).ready(function(){
    $('a.button').click(function(){
    $(this).toggleClass('active');
    });
    });

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

    }

    a.button {
    background-position:0 0;
    width: 123px;
    height: 45px;

    }

    a.button:hover {
    background-position:0 -45;
    width: 123px;
    height: 45px;
    }

    a.button.active {
    background-position:0 -90;
    width: 123px;
    height: 45px;
    }

    a.button.active:hover {
    background-position: 0 -135;
    width: 123px;
    height: 45px;
    }

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.