【rails・bootstrap】ボタンのデザインを変えたい

Question

bootstrapで実装しているのですが、いいねのボタンの中に無駄なデザイン（白い四角）が入ってしまっているので直したいです。

この状態を、下記画像のように無駄な四角がなくなるように直したいです。

コードは下記の通りです。
button_to以外にすれば直るかと思ったのですが、他のメソッドが見つかりませんでした。

      <div class ="gym-like-button">
        <a><%= button_to 'いいね', gym_likes_path(@gym) %></a>
      </div>

該当部分のソース

<div class="gym-like">
      <a class="gym-like-a">いいね:0</a>
      <div class="gym-like-button">
        <a><form class="button_to" method="post" action="/gyms/2/likes"><input type="submit" value="いいね"><input type="hidden" name="authenticity_token" value="W/0tAV7UKr18ABeBePKtE6SXKq7Gszz/5ul7WfBmqasvocAcgAmiaN+7PXO7XbL91H0Uk/9DhKbmA5tJrz+5FA=="></form></a>
      </div>
    </div>

link_toに変えた場合のエラー

Comments

[m.ts10806]

なんでしょう「無駄なデザイン」って。
いずれにしてもデザインしたいのでしたらCSSの話では（Rails詳しいわけではないですが調べた感じ、CSSクラスをあてるようなので）

[NEMOTOSHOTA]

ぼたんのなかについている「白い四角」が無駄なデザインになります。こちらcssは当てていません。bootstrapも当てていません。しかし、ボタンのいいねが白い四角で囲まれてしまっているので取り除きたいのです。

[kei344]

当該箇所の出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。

[NEMOTOSHOTA]

該当部分のソースを追記しました。

[kei344]

コードはスクリーンショットだけでなくコードブロックにテキストでお書きください。また、a要素の外側まで入れてください。

[NEMOTOSHOTA]

上記追記をしました。

Answer 1

<a>タグ自体が不要では？
無駄な四角をなくすってなると後者ですかね。

<div class ="gym-like-button">
  <%= button_to 'いいね', gym_likes_path(@gym) %>
</div>

もしくは

<div class ="gym-like-button">
  <%= link_to 'いいね', gym_likes_path(@gym) %>
</div>

で良いと思うのですが...。

Comments

[NEMOTOSHOTA]

回答ありがとうございます、link_toにすると、routing errorになるようです。画像を追記します。
（link_toメソッドではpostリクエストは正常に動かない？とみて現在調べています。）

[rhiroe]

method: :post を加えれば動くと思います。

[NEMOTOSHOTA]

動きました、、2週間ほど詰まっていたので助かりました。ありがとうございます。

Answer 2

Railsは触ったことが無いので一般的なHTMLの文法として、ボタンのようなインタラクティブ要素は<a>要素の中に入れられません。

その上で、input要素に「gym-like-button」クラスをつけるようにすればよいのではないでしょうか。

Comments

[NEMOTOSHOTA]

rubyで書かれている部分を以下のようにしたのですが、画像と変わりませんでした。

```
<div class ="gym-like">
<a class ="gym-like-a">いいね:<%= @gym.likes.count %></a>
<% if current_user.already_liked?(@gym) %>
<div class ="gym-like-button">
<%= button_to '取り消す', gym_like_path(@gym), method: :delete %>
</div>
<% else %>
<div class ="gym-like-button">
<%= button_to 'いいね', gym_likes_path(@gym) %>
</div>
<% end %>
</div>
```

[kei344]

（再掲）input要素に「gym-like-button」クラスをつけるようにすればよいのではないでしょうか。
Railsにはそういう処理はできないんですかね。すみませんが特に詳しくないのでこれ以上はお手伝いできません。

[NEMOTOSHOTA]

button_toで囲まれている要素がinput要素になるのでできなさそうです。

[NEMOTOSHOTA]

railsはbutton_toで囲まれている要素がinput要素になるのでできなさそうです。