How to create push button?

Question

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

Scharrels · Answer 1 · 2010-05-13T12:09:36.593

2

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.

edited May 13 '10 at 12:09

answered May 13 '10 at 11:54

Scharrels

3,055
25
31

1

I think what he's asking for is a way to style links so that they look like push-buttons, rather than using form controls. Edit: now that I've reread his post he's also looking for a toggle button, which i don't think one can do with form buttons? (afaik) – TJ Ellis May 13 '10 at 11:56
It would be like, when i clicked, it will again come up. Actually, i dont want to be up until it clicked again. Like It should go inside. If i click again it should come to the original shape – Manoj May 13 '10 at 11:58
1

Indeed, he's asking how to imitate an old style of button control that works more like a checkbox than a button. You click it and it stays "stuck in" until you click it again. I often wondered why at least IE, in the browser's non-conforming *glory* days, didn't allow you to style checkboxes like that. – Andy E May 13 '10 at 12:00

score 2 · Answer 2 · answered May 13 '10 at 11:59

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.

score 1 · Accepted Answer · edited May 23 '17 at 12:34

1

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.

edited May 23 '17 at 12:34

Community

1
1

answered May 13 '10 at 11:55

Gregory Pakosz

69,011
20
139
164

actually you don't even need a variable, just act upon the current class of the html element being "pressed" or "released" – Gregory Pakosz May 13 '10 at 12:20

score 1 · Answer 4 · answered May 13 '10 at 11:56

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;
}

score 0 · Answer 5 · answered Jan 01 '13 at 19:19

why don't you try a generator? http://css-button-generator.com/

code sample like this...

<style type="text/css">
.css_btn_class {
    font-size:20px;
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #ffaa22;
    padding:16px 38px;
    text-decoration:none;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffec64), color-stop(100%, #ffab23) );
    background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
    background:-ms-linear-gradient( top, #ffec64 5%, #ffab23 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
    background-color:#ffec64;
    color:#333333;
    display:inline-block;
    text-shadow:1px 1px 0px #ffee66;
    -webkit-box-shadow:inset 1px 1px 0px 0px #fff6af;
    -moz-box-shadow:inset 1px 1px 0px 0px #fff6af;
    box-shadow:inset 1px 1px 0px 0px #fff6af;
}.css_btn_class:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
    background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
    background:-ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
    background-color:#ffab23;
}.css_btn_class:active {
    position:relative;
    top:1px;
}
/* This css button was generated by css-button-generator.com */
</style>

score 0 · Answer 6 · answered May 13 '10 at 11:55

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/

How to create push button?

6 Answers6