# More elegant solution for turning link into button?

**URL:** <https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821>\
**Category:** rubyonrails-talk\
**Created:** [March 2, 2010, 3:26pm UTC](https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821 "2010-03-02T15:26:05Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dudebot](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@Dudebot](https://discuss.rubyonrails.org/u/Dudebot)\
**Post date:** [March 2, 2010, 3:26pm UTC](https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821/1 "2010-03-02T15:26:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hassan](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/hassan/32/714_2.png) [@hassan](https://discuss.rubyonrails.org/u/hassan)\
**Post date:** [March 2, 2010, 3:31pm UTC](https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821/2 "2010-03-02T15:31:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dudebot](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@Dudebot](https://discuss.rubyonrails.org/u/Dudebot)\
**Post date:** [March 2, 2010, 3:54pm UTC](https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821/3 "2010-03-02T15:54:26Z")

</div>

> 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

---

<div class="post-metadata">

**Author:** ![hassan](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/hassan/32/714_2.png) [@hassan](https://discuss.rubyonrails.org/u/hassan)\
**Post date:** [March 2, 2010, 4:04pm UTC](https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821/4 "2010-03-02T16:04:19Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![Dudebot](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@Dudebot](https://discuss.rubyonrails.org/u/Dudebot)\
**Post date:** [March 2, 2010, 4:15pm UTC](https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821/5 "2010-03-02T16:15:47Z")

</div>

> 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

---

<div class="post-metadata">

**Author:** ![hassan](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/hassan/32/714_2.png) [@hassan](https://discuss.rubyonrails.org/u/hassan)\
**Post date:** [March 2, 2010, 4:54pm UTC](https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821/6 "2010-03-02T16:54:43Z")

</div>

A quick example: \<[http://webtuitive.com/samples/button.html&gt](http://webtuitive.com/samples/button.html&gt);

---

<div class="post-metadata">

**Author:** ![Dudebot](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@Dudebot](https://discuss.rubyonrails.org/u/Dudebot)\
**Post date:** [March 2, 2010, 5:42pm UTC](https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821/7 "2010-03-02T17:42:16Z")

</div>

> A quick example: \<[http://webtuitive.com/samples/button.html&gt](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 😉

Thanks, Craig

---

<div class="post-metadata">

**Author:** ![hassan](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/hassan/32/714_2.png) [@hassan](https://discuss.rubyonrails.org/u/hassan)\
**Post date:** [March 2, 2010, 5:48pm UTC](https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821/8 "2010-03-02T17:48:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Brian\_Malinconico](https://avatars.discourse-cdn.com/v4/letter/b/eada6e/32.png) [@Brian\_Malinconico](https://discuss.rubyonrails.org/u/Brian_Malinconico)\
**Post date:** [March 4, 2010, 3:33am UTC](https://discuss.rubyonrails.org/t/more-elegant-solution-for-turning-link-into-button/49821/9 "2010-03-04T03:33:28Z")

</div>

> Appreciate it, but that's a heck of a lot of CSS code to get something that approximates the look of a default button 😉
> 
> 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/](http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-here/)

Brian