How to create push button?

Question

Hi All,

I want to create a button in html. When i click, it should go inner side and if i click it again it should come up. How to do it in CSS?

THanks

Answer 1

First, create an element to act as your styled element:

<span class="toggle">Click!</span>

Now you can style this element, like Arve Systad described:

.toggle {
    padding: 5px;
    background: #DDD;
    border-top: 2px solid #CCC;
    border-left: 2px solid #CCC;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
}

.toggle.down {
    border-top: 2px solid #555;
    border-left: 2px solid #555;
    border-right: 2px solid #CCC;
    border-bottom: 2px solid #CCC;
}

Finally, add the toggle functionality, using javascript (or in my example, jQuery):

$(".toggle").click(function(){
  $(this).toggleClass("down");
});

If using javascript is a problem, you need to look for another solution. You could use a checkbox; this element has a checked and an unchecked state by itself. However, you might not be able to style the checkbox in the same way in every browser; I don't even know if you can style the separate states in IE.

Answer 2

Give it a class, like "button", and then "invert" borders on :active. Example:

.button {
    padding: 5px;
    background: #DDD;
    border-top: 2px solid #CCC;
    border-left: 2px solid #CCC;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
}

.button:active {
    border-top: 2px solid #555;
    border-left: 2px solid #555;
    border-right: 2px solid #CCC;
    border-bottom: 2px solid #CCC;
}

Looks like this: http://jsfiddle.net/8wfw3/

Answer 3

You can't achieve that using CSS alone.

You would need to use Javascript to update a boolean variable that holds the state of the button: pressed or released and change the css class of the element accordingly.

See for instance this jQuery UI demo or the How do you create a toggle button? question on SO.

Answer 4

You can set a white border on the top and left, and a black one on the bottom and right. Just reverse for a pushed button. If that's not enough you can use images.

button {
      border-width: 1px;
      border-color: white black black white;
      border-style: solid;
}
button:active {
      border-color: black white white black;
}

Answer 5

I don't think you can with an html button. It doesn't have 'up' and 'down' states.

I think you'd need to use a checkbox so that you have two states (it's an html input tag with a type of checkbox). Then you could use some JavaScript to show two different images over the checkbox depending on whether it's checked or not.

Answer 6

i do not know that , i am a new man !!