Кнопка Skew, а не Text, в цикле

Question

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

Я хочу наклонить кнопку, но не текст.

Вот CSS:

.btn-primary-2 {
    transform: skew(-15deg);
    background: linear-gradient(to right,  yellow, red) !important;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px !important;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
    margin: 10px 3px ;
}

Вот

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

Я предпринял несколько попыток, но не хочу публиковать их, потому что они не работают и не имеют отношения к делу.

Я хочу наклонить кнопку, но не текст.Любые предложения о том, как это сделать?

ОБНОВЛЕНИЕ:

Я добился прогресса.Сама кнопка не работает, она работает только тогда, когда я нажимаю на сам текст.Как мне его прикрепить?

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

Я использовал "button_to" вместо link_to, но он каким-то образом переходит на ту же ссылку, что и link_to, но получает ошибки, такие как "param отсутствует или значение пусто:list "- я недавно изменил свои модели / контроллер и все еще работаю над ним .. но независимо, другая ссылка работает с link_to (переходя по тому же URL)

Answer 1

Здесь я напишу пример кода, надеюсь, это поможет вам.

.btn-primary-2 {
  transform: skew(-15deg);
  background: linear-gradient(to right, yellow, red) !important;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px !important;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  margin: 10px 3px;
}

.btn-primary-2 span {
  display: block;
  transform: skew(15deg);
}

<div class="btn-primary-2">
  <span>SENDHERE</span>
</div>