Custom Form Buttons PDF Print E-mail
Written by Shawn   
Wednesday, 22 April 2009 08:31

You spend a lot of time and energy to make your website pages look hot only to have to ruin it with vanilla form submit buttons.  No worries! LYME Team has got the answer!

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.   <head>
  5.     <style type="text/css">
  6.       .button {
  7.         width: 111px;
  8.         height: 52px;
  9.         border: none;
  10.         font-size: 22px;
  11.         background: url('/static/button.png') no-repeat top left;
  12.         padding: 2px 8px;
  13.       }
  14.       .button:hover {
  15.         width: 111px;
  16.         height: 52px;
  17.         font-size: 22px;
  18.         border: none;
  19.         background: url('/static/button-hover.png') no-repeat top left;
  20.         padding: 2px 8px;
  21.       }
  22.       .button-down {
  23.         width: 111px;
  24.         height: 52px;
  25.         font-size: 22px;
  26.         border: none;
  27.         background: url('/static/button-click.png') no-repeat top left;
  28.         padding: 2px 8px;
  29.       }
  30.     </style>    
  31.   </head>
  32.   <body>
  33.     <div style="display:none;">precache layer<img src="/static/button-hover.png" /><img src="/static/button-click.png" /></div>
  34.     <input type="submit" value="Continue" class="button" onmousedown="this.className='button-down'" onmouseup="this.className='button'" onmouseout="this.className='button'"/>
  35.   </body>
  36. </html>

First off.  Make three style sheet classes, one for each state of the button.  The first .button is the button in normal state.   Second one .button:hover is using the built-in hover event state.   Last is .button-down which is the class that represents the button when the user clicks it.

Next issue is since these are graphics representing our buttons we don't want the user having to look at a "image-is-loading" box while the button picture is downloading.  So we need to precache the button pictures.  The button normal state should automatically be downloaded by the browser.  But the other two events need the precache.

There are a lot of other solutions out there.  For example using Javascript to load the images.  I prefer to use the CSS way, which to me is a whole lot simpler, and just make a div block that is hidden and load my images in the hidden block.  The Javascript way could fail because of how each browser may handle the precaching script.  Since this is a common way to precache its not likely it will fail but on any case my way seems a little easier to me.

Next up is the button itself.  Notice we didn't blantly overwrite the input tag.  This is because that would be epic in fail. ;-)  <input> can be a million different type form components and unfortunitely CSS is too stupid to know the difference.  So please note...
WARNING:  Be VERY careful when overwriting form components in style sheets.

Which is why I opt to just never do it and instead link my components individually to the class.  This also lets us use javascript to tweak the button.  Without this we couldn't tweak the button to have normal button feel.  OnMouseDown event is when the user clicks the mouse button.  When they trigger that event we relink the class in javascript to button-down.  When the user lets up triggering OnMouseUp or does a fly-by and triggers OnMouseOut we link the button back to the button style class.

There you go.  Nothing could be simpler and keep your pages right down to your HTML forms looking hot.

Enjoy!

Comments
Search
Only registered users can write comments!

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."
Last Updated ( Wednesday, 22 April 2009 09:18 )
 
Copyright © 2010 lymeteam.org. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.