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进入了相同的链接，但是收到诸如“参数缺失或值为空：列表”之类的错误-我最近更改了我的模型/控制器和仍在处理中。.但是，无论如何，另一个链接与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>

循环中的倾斜按钮而非文本

1 个答案: