People always get excited for a little interaction on web pages. So why not make the buttons look pressed when user press them? This little trick is extremely useful and popular. Recognize this button below?
Right, its from the very famous TWITTER.
You can also see a Demo of this tutorial.
Design your buttons
First design the buttons in photoshop or fireworks, so you have a rough idea on how big they should be. Then slice the buttons into right middle and left sections like this
Dynamic width buttons
Write your html and use SPAN to hold extra images.
HTML
<ul>
<li><span class="left"></span><a href="#t1">Button1</a><span class="right"></span></li>
<li><span class="left"></span><a href="#t2">Button2 test </a><span class="right"></span></li>
<li><span class="left"></span><a href="#t3">Bu3</a><span class="right"></span></li>
</ul>CSS
body { font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.4em; } a { color:#cc0000; text-decoration:none; } ul li { float:left; display:block; } ul li a { color:#cc0000; font-size:23px; font-weight:bold; display:block; float:left; padding:11px 0 13px 0; background:url(images/gray-mid.png) repeat-x; } ul li span.left { display:block; float:left; width:13px; height:40px; background:url(images/gray-left.png) no-repeat; } ul li span.right { display:block; float:left; margin:0 20px 0 0; width:13px; height:40px; background:url(images/gray-right.png) no-repeat; }
At this part I found the height of the button looks different in Firefox browsers.
This is when some CSS hacks on firefox come handy.
You can read more on firefox browser hacks.
ul li a, x:-moz-any-link, x:default { padding:11px 0 12px 0; } /* Target Firefox 2 */ ul li a, x:-moz-any-link { padding:11px 0 12px 0; }
Hover
Apply a gradient from light to dark to those already sliced pieces and name them differently:
ul li:hover span.left { background:url(images/gray-left-hover.png) no-repeat; } ul li:hover span.right{ background:url(images/gray-right-hover.png) no-repeat; } ul li:hover a { background:url(images/gray-mid-hover.png) repeat-x; }
Active
Active is when you press the button.
Flip the hover images vertically, so they looks pressing in.
ul li:active span.left{ background:url(images/gray-left-active.png) no-repeat; } ul li:active span.right { background:url(images/gray-right-active.png) no-repeat; } ul li:active a { background:url(images/gray-mid-active.png) repeat-x; }