HTML Button "Push" Effect

Question

i can't figure out what makes an html button element appear to be pushed (right click an html button and then hover on and off to see what i mean).

the following two examples i've taken from other websites. the first has the typical button push effect. the second does not.

.button { 
border:none 0; 
background-color:Transparent; }
.button .l { background:url('img.gif') no-repeat 0 0; 
padding-left:7px;
display:block; 
height:32px; }
.button .c { background:url('img.gif') repeat-x 0 0; 
display:block; 
height:32px; 
padding-top:7px; }
.button .r {
background:url('img.gif') no-repeat right top; 
padding-right:7px; 
display:block; 
height:32px; }

and

.button {
background:#F0F0F0 url(img.gif) repeat-x scroll 0 0;
border:1px solid Black;
color:#333333;
font-size:12px;
height:20px;
padding-left:8px;
padding-right:8px; }

EDIT: @ mr skeet, i want a button that will look the same in all browsers (ie. background image) but still behave like a real html button with the push effect. am i correct in assuming that i'll need javascript for this? and different css for the push state? an example/tutorial would be awesome

scunliffe · Accepted Answer · 2009-03-14 21:24:15Z

23

Either use

<input type="button" value="Click Me"/>

which will automatically act like a button, or use the :hover and :active CSS pseudo classes to get what you want...

a.likeAButton {
  background-color:#67a0cf;
  border:1px outset #2683cf;
  color:#fff;
  padding:3px 3px 3px 3px;
  margin:1px;
  text-decoration:none;
}
a.likeAButton:hover {
  background-color:#5788af;
  border:1px outset #2683cf;
  color:#fcffdf;
  padding:3px 3px 3px 3px;
  margin:1px;
  text-decoration:none;
}
a.likeAButton:active {
  background-color:#67b4cf;
  border:1px inset #1d659f;
  color:#e0ffaf;
  padding:4px 2px 2px 4px;
  margin:1px;
  text-decoration:none;
}


<a href="somepage.html" class="likeAButton">Fake Button</a>

edited Mar 14, 2009 at 21:24

answered Mar 14, 2009 at 21:07

scunliffe

63.8k26 gold badges132 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Howell Over a year ago

Be aware though, that IE6 does not properly handle <input type="button"> elements. If you have more than one of these in your forms, you will get unexpected (bad) results.

scunliffe Over a year ago

@bigmattyh - not quite, IE6+IE7 handle <input type="button"> elements just fine, but they have LOTS of issues with actual <button> elements because they submit the innerText, not the value attribute (when clicked)

Amit · Accepted Answer · 2012-04-02 16:41:43Z

-2

you can also add border radius to every element such as a.likeabutton, a.likeabutton:hover and all. this wil give it a good look. If we can make it like a list of Button then it will have a better Navbar feature, I tried this though, it position of these buttons does no remain same in Maximized and restored borwser.

answered Apr 2, 2012 at 16:41

Amit

1

1 Comment

Paul Sweatte Over a year ago

border-radius is overkill, and won't work in all browsers as requested.

Collectives™ on Stack Overflow

HTML Button "Push" Effect

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related