Question

我使用：after元素创建了一个带css的滑动按钮。

我遇到的问题是我的“输入”按钮似乎没有使用：after元素，它们不会像普通按钮那样滑动。

<input type="submit" value="<?php echo $button_login; ?>" class="btn btn-primary" />

我有什么方法可以使用：after元素或者是否有可能的解决方法？

编辑：在这里添加更多信息是按钮的CSS。

.btn-cart {
  color: #3498db;
}
.btn-cart:hover,
.btn-cart:focus,
.btn-cart:active {
  background: none;
  border-color: transparent;
}
.btn-cart:hover:after,
.btn-cart:focus:after,
.btn-cart:active:after {
  width: 100%;
}
.btn-cart:after {
  background: #3498db;
}
input.btn-cart:hover,
button.btn-cart:hover,
input.btn-cart:focus,
button.btn-cart:focus,
input.btn-cart:active,
button.btn-cart:active {
  background: #3498db;
}

我已尝试过:: after但不起作用：（

按钮不会在任何浏览器上滑动，因为：after元素不能在任何输入按钮上工作。

任何帮助将不胜感激：）

谢谢，理查德

Answer 1

我自己找到了解决方案。这适用于我的输入按钮，我在原始代码中将“输入”更改为“按钮”，并添加了“登录”一词。请参阅下面的工作代码，

<p><button type="submit" value="<?php echo $button_login; ?>" class="btn btn-primary">Login</button></p>

在元素后使用css的输入按钮

1 个答案: