如何使按钮链接到页面？

Question

I am newbie with Rails and Bulma and trying to create a button which can link to another page. I mean, for example a button named facebook, will link to facebook page, a button named twitter will link to twitter.

And here is my code.

<div class="field">
 <p class="control">
 <button class="button is-primary is-outlined is-fullwidth">
 <span class="icon">
 <i class="fab fa-twitter"></i>
 </span>
 <span>twitter</span>
 <a href="https://twitter.com/home?lang=en"></a>
 </button>
 </p>
 </div>

My problem is, I thought that this line will link to the page twitter <a href="https://twitter.com/home?lang=en"></a> , but actually it does not work. I tried some way but do not find any.

Could you guys please give me some ideas? Thank you very much.

Answer 1

As the comments state above, you are misusing buttons and links here. Try to keep your links as things that load new pages and buttons as things that submit forms and cause JS events.

Most CSS frameworks will allow you to use styling for links and buttons the same way, so your end users will not notice the difference.

If you want a link, you would normally do something like:

<%= link_to "Link Title", "url-or-path", class: "some-class"

But if you want to add a little more to the link, like put an icon (or even a div) in it, just turn the link into a block:

<%= link_to "url-or-path", class: "some-class" do %>
  <i class="icon-class"></i>
  Link Title
<% end %>

For your example, this would look something like:

<%= link_to "https://twitter.com/home?lang=en", class: "button is-primary is-outlined is-fullwidth" do %>
  <i class="fab fa-twitter"></i>
  Twitter
<% end %>

You are going to code a link, but your users will see a button.