読者です 読者をやめる 読者になる 読者になる

日常

ケ・セラ・セラ

form submit ボタンにリンクっぽくfont awesomeを使う

css

メモです。

例えばこんな、fontawesome のハートマークをクリックしたら submit して likes/create or likes/destroy したいような状況ですが、

      <%= form_for(current_user.likes.build,
        html: { class: "form-inline" }) do |f| %>
        <div><%= hidden_field_tag :article_id, article.id %></div>
        <%= button_tag type: 'submit', class: "button-as_link" do %>
          <i class="fa fa-heart-o fa-lg c-like"></i>
        <% end %>
      <% end %>

font awesome を使いたくて、button をリンクのような見た目にしたかったのです。

こんな風に css を書いてそれっぽくなりました。(クラス名はちょっとひどいので後で整理しないといけない認識あります。。)

.button-as_link {
  background: none;
  border: none;
  padding: 0;
}

.form-inline {
  display: inline-block;
}