Html 循环中的倾斜按钮，而不是文本

我在这方面找到了一些答案，但没有一个涉及到循环。我不知道如何分离文本和按钮，然后将它们组合起来。。。奇怪的是，这是我能想到的唯一方法。但我相信你们中的一些人会马上知道答案

我想扭曲按钮，但不想扭曲文本

以下是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 %>

类别：“btn btn-primary-2”%>

我已经做了一些尝试，但并没有把它们贴出来，因为它们不起作用，也不相关

我想扭曲按钮，但不想扭曲文本。 关于如何进行这项工作，有什么建议吗

更新：

我已经取得了进展。按钮本身不起作用，它只在我点击文本本身时起作用。我该如何附加它

<% @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 %>

类别类别：“btn btn cat”）%>

---

我使用了“button_to”而不是link_to，但它以某种方式转到与link_to相同的链接，但收到错误，如“param丢失或值为空：列表”-我最近更改了我的模型/控制器，并且仍在处理它。。但不管怎样，另一个链接与link_to（指向同一url）

在这里，我编写了示例代码，希望这对您有所帮助

.btn-primary-2{
变换：倾斜（-15度）；
背景：线性渐变（向右、黄色、红色）！重要；
边界：无；
颜色：白色；
填充：20px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
边界半径：16px！重要；
盒影：0px 5px 0px rgba（0,0,0,0.3）；
利润率：10px 3px；
}
.btn-primary-2跨度{
显示：块；
变换：倾斜（15度）；
}

发送到这里

在

span中写入文本

，因为div中的文本将占用父属性。如果我将btn cat更改为span，则不会发生任何更改。如果我将btn文本更改为span，那么文本将采用btn cat和skews的类。。。。还是我错了你说的话？