two state buttons

Posted on 2003-11-28
Last Modified: 2012-06-27
I was wondering if it is possible to create a two state button in HTML (+css+javascript, if needed). I don't have any legaly compatibility limitation so anything will do.

I think you know what i'm talking about, anyway as behaviour it's something like the input type=checkbox but... it's a button.
Only quick code or keywords needed.
Question by:ThG
LVL 14

Author Comment

ID: 9838935
sorry for typo

Expert Comment

ID: 9839441
This should do the trick:

<script language="javascript">
var bState = false;

function changeState(rButton) {
  if (bState == false) {
    bState = true;"#FF0000"
  else if (bState == true) {
    bState = false;"#0000FF"


<input name="button1" style="background:#0000FF;" type="button" value="clickme" onClick="javascript:changeState(this);">

If you need it saving to a database, i'd suggest using a html hidden value, changing that with the buttonclick.

Keep in mind you could change anything with the button click, not just background color :)
LVL 31

Accepted Solution

seanpowell earned 75 total points
ID: 9839844
Here's a two-state button without javascript, just CSS:

<title>Rollover Buttons</title>
<style media="screen" type="text/css">
#cssrollovers   { background-color: #FFCC66; padding: 8px; border: solid 1px #000; width: 200px; }
.button         { font-weight: bold; text-align: center; }
.button a       { color: #000000; text-decoration: none; background-color: #CCCCCC; display: block; padding: 4px; border-style: solid; border-width: 2px; border-color: #dcdcdc #696969 #696969 #dcdcdc; width: 180px; }
.button a:hover { background-color: #EEEEEE; border-style: solid; border-width: 2px; border-color: #696969 #dcdcdc #a9a9a9 #696969; }
<body bgcolor="#ffffff">
<div id="cssrollovers">
<p class="button"><a href="">Experts Exchange</a></p>
<p class="button"><a href="">Google</a></p>
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

LVL 14

Author Comment

ID: 9840574
Hi georgemarian!
You answer has been indeed enlightening. I worked it out a little an I ended up with this, which is exactly what i want. It works well on Mozilla 1.5 and quite well on konqueror. I'd like to hear how it works on IE. Thank you.
Thanks to d0zerz as well for his answer.

<title>Two state buttons -- ThG at 20031129</title>
<style type="text/css">
  .button { color: #000000; text-align: center; text-decoration: none; font-weight: bold;
            background-color: #CCCCCC; display: block; padding: 4px; border-style: solid;
            border-width: 2px; border-color: #dcdcdc #696969 #696969 #dcdcdc;
            width: 180px; cursor: pointer; }
  .button_p { color: #000000; background-color: #EEEEEE; text-align: center;
              text-decoration: none; font-weight: bold;  display: block; padding: 4px;
              border-style: solid; border-width: 2px;
              border-color: #696969 #bbbbbb #bbbbbb #696969; width: 180px; cursor: pointer; }
<script type="text/javascript">
function toggle(xid) {
  if (xid.className == 'button') xid.className = 'button_p';
  else xid.className = 'button';
<body bgcolor="#ffffff">
<table border=1 cellpadding=10 bgcolor="#ffcc66">
<tr><td><div class="button" onclick="toggle(this)">Push button 1</div></td></tr>
<tr><td><div class="button" onclick="toggle(this)">Another option</div></td></tr>

LVL 31

Expert Comment

ID: 9840601
No problem on IE6 - now I see what you were trying to do - sorry I misconstrued the original intent :-(

Glad to have helped.
LVL 18

Expert Comment

ID: 14996223
ThG could you please email me using the email in my profile. If you are not busy I would like you to join a PHP development team. Most off EE's top PHP experts are already part of it. Thanks!

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now