Как разделить текст и кнопку для перекоса, или объединить текст и кнопку?

Question

Итак, у меня есть следующий код, который работает, но я не могу отделить текст от кнопки.Например, при перекосе текст искажается.Любой способ отделить их?

<div class="row">
  <div class="left">
      <h2>Categories</h2>
        <div class="categories-">

          <% @categories.each do |cat| %>
            <%= link_to cat.name, listings_path(:category => cat), class: "btn btn-primary-2" %>
          <% end %>
      </div>

Вот CSS:

 .categories- {
   padding-top: 30px;
   font-size: 30px;
   -webkit-font-smoothing: antialiased;
 }

Затем я попытался сделать это, что работает, но сама кнопка при нажатии не нажимает ни на чтотак как он не привязан к ссылке.Любой способ прикрепить его?

<div class="categories-">
      <% @categories.each do |cat| %>
        <div id="btn-text"><div id="btn-cat"><%= link_to cat.name, listings_path(:category => cat) %></div></div>
      <% end %>
  </div>

Мне сказали, что вы добавили, но это не сработало.

Вот CSS:

 #btn-cat {
    transform: skew(-15deg);
    background: linear-gradient(to right,  yellow, red) !important;
    border: none;
    color: white;
    padding: 20px;

    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px !important;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  }

  #btn-text {
    transform: skew(15deg);
    background: transparent;
    border: none;
    color: white !important;
    text-decoration: none !important;

Как мне выполнитьлюбой из этих методов?Верхний текст и кнопка не отсоединятся.Внизу кнопка и текст не будут прикреплены.

Answer 1

Если вы хотите отделить текст от кнопки и использовать #btn-cat и #btn-text отдельно.

Вы можете использовать:

<div class="categories-">
  <% @categories.each do |cat| %>
    <div id="btn-cat">
      <%= link_to listings_path(:category => cat) do %>
        <div id="btn-text"><%= cat.name %></div>
      <% end %>
    </div>
  <% end %>
</div>

Теперь все кнопки это ссылки:)

Answer 2

не видя ваших контроллеров или маршрутов, я должен был бы предположить, что это должно было бы быть:

<% @categories.each do |cat| %>
  <%= link_to cat.name, category_path(cat), class: "btn btn-primary-2" %>
<% end %>

Но если вы не используете обычные маршруты отдыха и вы передаете модель, которая некоррелируйте с контроллером с тем же типом имени, что и у класса вашей переменной экземпляра, вам нужно быть более подробным.

<% @categories.each do |cat| %>
    <%= link_to cat.name, controller: 'listings', action: 'show', id: cat.id, class: 'btn btn-primary-2' %>
 <%  end %>

Выше следует попытаться произвести:

<a href="/listings/show/23" class="btn btn-primary-2">Category Name</a> 
# where 23 and Category name are repspective from the cat object.

См. Документацию о вариантах использования link_to помощник