Question

我正在尝试创建一个灵活的CSS按钮，只使用一个图像（或两个，使用滑动门技术），但我希望它足够灵活，以便多个标记具有相同的效果。例如：

<a href="">Button</a>

将保存效果设为：

<input type="submit" value="Button" />

存在任何想法或啧啧？

Answer 1

我认为您不能将滑动门技术应用于输入元素。当我这样做时，我使用了button元素：

<button type="submit"><span>Button</span></button>

你必须要注意IE，因为它有点错误（提交按钮的内容而不是它的值，当你在提交所有按钮而不是点击的按钮的表单中有多个提交按钮时），但这些病例通常很少见。

对于我使用的链接：

<a href="..." class="button"><span>Link</span></a>

近似的CSS：

a.button,
button {
  color: #ffffff;
  background: transparent url(right.png) no-repeat top right;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border: none;
  padding: 0 8px 0 0;
  margin: 1px 0;
  height: 20px;
  overflow: visible;
  cursor: pointer;
}

a.button::-moz-focus-inner,
button::-moz-focus-inner {
  border: none;
}

a.button:focus,
button:focus {
  outline: 1px dotted buttontext;
}

a.button span,
button span {
  background: transparent url(left.png) no-repeat top left;
  padding: 2px 0 4px 8px;
  display: block;
}

Answer 2

如果你想使用推拉门，你可以在<input/>周围添加一个元素，对吗？

没有用于提交链接的纯CSS解决方案，HTML中唯一可以提交的内容是输入元素，因此您使用<input type="button" />和<input type="image" />时遇到困难。

Answer 3

我会使用Jquery submit event

所以..

$('#my_button').click(function() {
  $(this).submit();
});

如果你不理解Jquery这没有任何意义。

灵活的CSS按钮（可变宽度和标记）

3 个答案: