More elegant solution for turning link into button?

rubyonrails-talk
1

I'd like my print link to look like a button. Its action responds to a GET request (as I think it should.) I wrote this helper:

<code>   def button_link( label, path, *features ) # makes a link look like a button     linktext = "<input type=button value='" << label << "' onClick=\""     if features.length > 0 # opens new window, assigns features       linktext << "window.open('" << path << "','" << label << "'"       features.each { |feature| linktext << ",'" << feature << "'" }       linktext << ');return false;">'     else # opens in same window       linktext << "self.location='" << path << '\'">'     end   end </code>

Which works as expected in the view, e.g. <code> <%= button_link( 'Print', url_for( ... ), 'new_window' ) %> </code>

But feels kind of hacky. Does anyone have a more elegant solution?

TIA, Craig

2

Just style a regular link; that's what CSS is for...

3

Just style a regular link; that's what CSS is for...

-- Hassan Schroeder ------------------------ hassan.schroe...@gmail.com twitter: @hassan

That would be useful if you wanted to use an image for the link. But what if you want the default button for the browser? Craig

4

You don't need to use an image to style a link to look generically like a button, but yes, if you want it to look like a platform's native button, then you need to use a form element (or jump through a lot of hoops to try to simulate it).

5

You don't need to use an image to style a link to look generically like a button, but yes, if you want it to look like a platform's native button, then you need to use a form element (or jump through a lot of hoops to try to simulate it).

-- Hassan Schroeder ------------------------ hassan.schroe...@gmail.com twitter: @hassan

How would you style a link to look generically like a button without an image? Sorry for wandering OT into CSS land, but if the answer works, it cuts out some Rails code in my app. Keep in mind that I need the functionality of opening a new window when the user presses a button, which my code currently provides.

Thanks, Craig

6

A quick example: <http://webtuitive.com/samples/button.html&gt;

7

A quick example: <http://webtuitive.com/samples/button.html&gt;

-- Hassan Schroeder ------------------------ hassan.schroe...@gmail.com twitter: @hassan

Appreciate it, but that's a heck of a lot of CSS code to get something that approximates the look of a default button :wink:

Thanks, Craig

8

Are you kidding? It's utterly trivial. And you don't even have to use most of that if you don't care about the hover/active behavior.

And I would certainly prefer it to creating a form element needlessly for a simple link. But YMMV.

9

Appreciate it, but that's a heck of a lot of CSS code to get something that approximates the look of a default button :wink:

Thanks, Craig

Hassan is right that its trivial css implementation.

If you feel like learning SASS & Compass, there is the fancy buttons mixin that gives very , well fancy, buttons http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-here/

Brian