Question

我正试图在Bootstrap中创建一个甜美的Button。我有4张图像显示我的按钮的离散状态（正常，悬停，按下，已禁用）。

但我无法弄清楚最佳做法是什么。在输入类型图像中使用src似乎并不好用，因为浏览器在点击时会创建一个蓝色矩形。

（我只需将整个图像作为按钮，而不是需要在某个位置显示的徽标或smth）

编辑：它用于我的自定义facebook / google / outlook登录按钮

Answer 1

您需要将图片替换为您拥有的图片。

＆＃13;

.fb {
  background: url(http://placehold.it/50x20/00ff00);
}

.fb:hover {
  background: url(http://placehold.it/50x20/0000ff);
}

.outlook:disabled {
  background: url(http://placehold.it/50x20/000000);
  color: white;
}

.fb:active {
  background: url(http://placehold.it/50x20/666666);
}

＆＃13;

<button type="button" class="fb">button</button>
<button type="button" class="outlook" disabled>button</button>

＆＃13;

Answer 2

最佳做法是使用：在您将在“按钮”上显示图像的元素之前。

Answer 3

您可以在锚标记内使用img标记来执行此操作要在状态之间切换，您可以使用jQuery。

如果您需要任何进一步的帮助，请告诉我们！

Bootstrap整个图像作为一个按钮

3 个答案: