Home/ Questions/Q 160487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T11:02:37+00:00

i can’t figure out what makes an html button element appear to be pushed

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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>
    • 0