"Dude, for a second I totally thought that link was a button!"
As a user interface developer I run into The Problem With Get Requests (Agile Web Development With Rails, pg397) when working in the interface realm of a rails project - often I want to use a link where the action, or :method it invokes suggests I should use a button.
But when wearing the UI designer hat, my goal is to make sure the user's interaction with the application is intuitive as possible. If a user expects some functionality to be represented by a link, or by a button, that's how I want to represent it.
Rails employs client side javascript to solve the issue of using a link where a button should be, but what if I don't want to depend on javascript and still want to match user expectations with a link. Or even visa versa? How can I, ahem, have the best of both worlds?
I put together some x-dresser classes for my buttons & links to parade around in. The two operative classes are link_as_button and button_as_link. As always the main challenge is getting things looking right on that brutal runway called IE, but with a modicum of styling you can get the look pretty near dead on; emulating a link underline in a button was the biggest challenge. If you interested in the solution, see the cross browser screen shots and css with explanatory comments below.
Adding/removing them is simple considering it's the footprint of a single stylesheet with two classes. Want to take them on a test run yourself? A little disclaimer: I have yet to use them in the wild but below I've outlined their usage, done some contextual tests, took some x browser screen shots of the tests, and have pasted the CSS styles used as of this writing. The CSS is well commented to let you know what's going on. For the latest code visit my git repository at http://github.com/leewbutler/xdressed_clickables, or git it now with...
git clone git://github.com/leewbutler/xdressed_clickables.git
Usage
| about | x-dresser | code |
|---|---|---|
| A normal button looks different in each browser. Maybe round or square, blue, etc... |
<input type="button">
|
|
| Instead we'll use this button. It is styled to look the same in all browsers... |
<input type="button" class="button">
|
|
| ...this allows us to apply the same styles to make a link appear to be a button. | link as button |
<a href="#" class="link-as-button"><a>
|
|
Likewise our links styles are defined to ensure x-browser consistency... |
link |
<a href="#"><a>
|
| ...which allows us to make a button appear to be a link |
<input type="button" class="button-as-link">
|
|
| ...and a submit button too. |
<input type="submit" class="button-as-link">
|
Test Alignment Within Text
This line tests link as button the vertical alignment of our x-dressers link relative to the surrounding text. Looks great!
Test With The Button_to Helper
Lets also test x-dressing when applied to the RubyOnRails button_to helper. We'll perform the test amidst a crowd of actual links that are none the wiser.
Actual link that is none the wiser.Actual link that is none the wiser.
Looking good girl! However the button_to that is x-dressing above would be outed if asked to appear inline instead. This is because the RubyOnRails button_to helper wraps the button in a <form> tag. The form tag forces a line break in the display, both above and below our button. But otherwise our button is looking just like your average everyday link!
Test Results On Major Browsers
xdressed_clickables.css
The styles here are only for reference (it might be outdated by the time you read this). If your looking for the latest stylesheet see the git instructions above.
/* ------------------------ BEGIN: link-as-button -----------------------------
Start by enforcing a consistent x-browser button style. To that end we are
styling three classes in one style definition: 1. button, 2. submit and
3. link-as-button. Here's some example usage...
<input type='button' class='button' value='press me' />
<input type='submit' class='submit' value='submit me' />
<a href='someurl' class='link-as-button'>I look like a button!</a> */
input.submit,
input.button,
a.link-as-button,
a.link-as-button:hover,
a.link-as-button:visited {
text-decoration: none;
cursor: default;
font: 12px arial;
padding: 2px 3px;
color: #000;
background-color: #eee;
border-width: 2px;
border-style: solid;
border-color: #ddd #888 #888 #ddd;
/* correct ie padding and alignment */
vertical-align: middle;
width:auto;
overflow:visible;
}
/* Remove extra 1px pad browsers give <INPUT>s by applying exactly
1px less than our above styles for <A CLASS='link-as-button'> */
input.submit,
input.button {
padding: 1px 2px;
}
/* ----------------------- END: link-as-button --------------------------- *
/* ------------------------ BEGIN: button-as-link ------------------------ */
/* Enforce a consistent x-browser link style.*/
a {
font-size: inherit;
font-family: inherit;
color: #009; }
a:hover {
color: #00f; }
/* Apply our link styles to a button */
input.button-as-link {
/* Remove buttonisms */
border: none;
margin: 0px 1px;
padding:0px;
/* Add linkisms */
font-size: inherit;
font-family: inherit;
color: #009;
cursor:pointer;
/* Correct padding in ie */
width:auto;
overflow:visible;
/* The underline challenge:
- There's no support for 'text-decoration: underline' in <inputs type='button'>.
- Using 'border-bottom: 1px' proves to create vertical alignment issues in x-browser testing.
- Using a bg image for the underline works great */
background:transparent url(../images/underline_blue_009.gif) repeat-x scroll 1% 90%;
}
input.button-as-link:hover {
color: #00f;
background:transparent url(../images/underline_blue_00f.gif) repeat-x scroll 1% 90%;
}
/* Apply 3 Filters to adjust the above styles in:
1) SAFARI: pull the underline image up 5% more */
html[xmlns*=""] body:last-child input.button-as-link,
html[xmlns*=""] body:last-child input.button-as-link:hover {
background-position: 1% 95%;
}
/* 2) IE7: Adjust the font to match a text link,
and pull the underline up 10% more */
*:first-child+html input.button-as-link,
*:first-child+html input.button-as-link:hover {
background-position: 1% 85%;
vertical-align: -10%;
font-family: times;
font-size: medium;
}
/* 3) IE6>: Repeat the above IE7 adjustments but use
the *html filter to target IE6 and under. */
* html input.button-as-link,
* html input.button-as-link:hover {
background-position: 1% 85%;
vertical-align: -10%;
font-family: times;
font-size: medium;
}
/* Finally, we might not be able to make the rails <form class='button-to'>
display inline, but lets at least cut out any extra space it takes up. */
form.button-to {
padding: 0px;
margin: 0px;
}
/* ------------------------ END: button-as-link ------------------------ */
0 comments:
Post a Comment