Form buttons eventually become the bane of every web designer/developer’s existence, with the developers pushing for flat styled HTML buttons for ease of implementation and creative pushing for slightly more complex graphical buttons. The trick to using graphical buttons lies in the creation of a semi-automatic scheme to build and deliver the assets, which is exactly what I built to automate the creation of RevolutionHealth.com’s green graphical buttons in an attempt to tame an unruly set of image files and creation steps.
When going the graphical button route, you can simple use a background image and have the browser text display on top, but we decided that we wanted fully graphic buttons so that the text could be styled to a greater detail. This necessitated building each button by hand in Photoshop, something that is rather painful and tedious when you have multiple buttons to create because of all the text on the various rollover states.
Instead, I decided to create a image with all the valid characters on it, slice it up into those various characters (as shown above) and save the pieces in a folder. Then leveraging the wonderful command line applications in the open source project ImageMagick I created a small ruby script that stitches the individual pieces back together, creating a button based on a string parameter.
Essentially, the script does some error checking on the string, sanitizes it based on business rules, then generates and issues the following command to the ImageMagick binaries:
convert +append left_cap.png s.png _a.png _m.png _p.png _l.png _e.png space.png _b.png _u.png _t.png _t.png _o.png _n.png right_cap.png sample_button.png
After the script is you done end up with a complete button that was created in a fraction of a second but still retains the benefits of using a graphical element. Please be sure to use accessible HTML with graphical buttons so that screen readers can “view” the site properly. A good example would be as follows:
<button type="submit" title="This is a sample button" id="sample_button_id" class="btn_sample_button"><span>Sample Button</span></button>
With the following CSS to hide the text when the browser is rendering CSS, but to show a valid button when it is not:
button span {
display: none;
}
Taking this concept a bit further, you could most likely use the same method I describe in combination with ImageMagick to create button assets on the fly. I fear that the overhead of creating such assets on the fly wouldn’t be enough to outweigh the benefit of being able to cache static assets on a large enterprise site, thus the reason I haven’t fully explored it. If someone does end up going that route, please drop me a note in the comments and let me know about it.
Below is the Ruby script I wrote to generate the buttons from the image slices, this could easily be done in a bash shell script or any of the other various options:
#!/usr/bin/env ruby
# make_button.rb by Ryan Orr
if ARGV[1] != nil
puts "You have multiple arguments, this means you probably forgot to put \"\" around your button name. Please try again."
exit 1
elsif ARGV[0] != nil
# Buesiness Rule: Buttons should start with a capital letter, and
# the only valid characters are A-Z, a-z, (space),
# (comma), & and ?
button_text = ARGV[0].capitalize.gsub(/[^A-Za-z ,?&]/,'')
else
puts "You need to pass in a string"
exit 1
end
counter = 0
string = "convert +append left_cap.png "
filename = ""
until counter == button_text.length
b = button_text[counter,1]
case b
when b[/[a-z]/]
string += "_#{b.downcase}.png "
filename += "#{b.downcase}"
when b[/[A-Z]/]
string += "#{b.downcase}.png "
filename += "#{b.downcase}"
when "?"
string += "question_mark.png "
when "&"
string += "ampersand.png "
when ","
string += "comma.png "
when " "
string += "space.png "
filename += "_"
end
counter += 1
end
filename = "#{filename.gsub(/[^A-Za-z_]/,'')}.png"
string += "right_cap.png #{filename}"
`#{string}` # Run the command that we've built