html - 在循环中倾斜按钮，而不是文本

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 相同的链接，但收到诸如“参数丢失或值为空:列表”之类的错误 - 我最近更改了我的模型/ Controller 和我仍在努力......但无论如何，另一个链接适用于 link_to(转到相同的网址)

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>