[hwoarang69]

i have a button. i want it so that when user click on it, it should stay ative. but this code below doesnt stay active. i am trying to get a toggle effect but when user click on it it stay active any cant go back,

<button type='submit' id='button1' class='button' name='button_1'>button1</button>


#button1
{
 color:white;
}

#button1:active, #button1:visited 
{
 color:green;
}

[modi123_1]

Typically you need some javascript for that.

[Nublet]

Well, active only works when you click on it, so it's normal for it to go back to being white. But I think visited might only work if it's a link.

Try this

<button type='submit' id='button1' class='button' name='button_1'><a href = "#">button1</a></button>

#button1 a
	{
	color:white;
	}
 
	#button1 a:active, #button1 a:visited
	{
	color:green;
	}

I assumed you were talking about making it stay green once you've clicked it but maybe I misunderstood something.

[j4v3d]

When you say a toggle effect do you mean like a rollover image, so the button is yellow and then when you select it and its active it goes green?

[hwoarang69]

" the button is yellow and then when you select it and its active it goes green and it stay green"

[Sergio Tapia]

I'm not sure you can accomplish this using only CSS.

You can try adding a CSS class to the button once you click on it though. Here's an example using jQuery:

<button class="btn">Hello World</button>

.btn {
  /* Default btn styles. */
  background: yellow;
}

.btn-highlight {
  background: green;
}

$(function() {
  $('button').click(function(){
    $(this).addClass('btn-highlight');
  });
});

This post has been edited by Sergio Tapia: 27 December 2012 - 07:00 AM

[hwoarang69]

<ul>
        	<li>Categories</li>
            <a href='?wlink=1'class='current_page'><li>page1</li></a>
            <a href='?wlink=2'><li>page2</li></a>
            <a href='?wlink=3'><li>page3</li></a>
</ul>

so trying to make this a menu only using css. if i hover over it i want background color black. and if i on this page than want blackground color white.

#left_menu ul li:hover
{
	background-color:black;
}
#left_menu ul a.current_page li,  #left_menu ul a.current_page li:hover
{
	background-color:gray;
}

the problem is that if i go to page 2 than active dont work. any idea what iam doing wrong.

i guess the problem is that some how i have to move the current_page class. but not sure how to do this.

This post has been edited by hwoarang69: 31 December 2012 - 08:19 PM

[fiddydips]

Sergio Tapia, on 27 December 2012 - 06:59 AM, said:

I'm not sure you can accomplish this using only CSS.

You can try adding a CSS class to the button once you click on it though. Here's an example using jQuery:

<button class="btn">Hello World</button>

.btn {
  /* Default btn styles. */
  background: yellow;
}

.btn-highlight {
  background: green;
}

$(function() {
  $('button').click(function(){
    $(this).addClass('btn-highlight');
  });
});

I second that. In fact, I favor any jquery based solution. It's just more interesting.


Adding to the above code:

<button class="btn">Hello World</button>

.btn {
  /* Default btn styles. */
  background: yellow;
}

.btn-highlight {
  background: green;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass('btn-highlight');
  });
});
</script>

<button class="btn">Hello World</button>

.btn {
 /* Default btn styles. */
 background: yellow;
}

.btn-highlight {
 background: green;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript">
 $(document).ready(function(){
  $("button").click(function(){
   $("p").toggleClass('btn-highlight');
  });
 });
</script> 

sorry forgot to close the code tag

This post has been edited by macosxnerd101: 02 January 2013 - 08:59 PM
Reason for edit:: Added closing code tag

[Anthonidas]

fiddydips, on 03 January 2013 - 05:02 AM, said:

In fact, I favor any jquery based solution. It's just more interesting.

In fact it is not (yet?) possible with CSS only. You have to use JS...