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>
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

777 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