Question

html有链接元素

<a href="#"></a>

以及按钮元素

<button></button>

事实上，他们的责任是不同的，但......有时设计希望他们看起来一样。除了重置显示，边距，填充，边框，背景，字体等之外，我不知道它们的样式看起来完全一样......它们最后看起来不一样，有时它们互相搞定默认定位属性。

所以我的初步解决方案如下：

链接示例设计师希望链接看起来像一个按钮。我在链接中包含一个按钮！

<a href="#"><button class="coolbutton">look cool</button></a>

我喜欢这个解决方案，特别是我认为按钮更容易设计。然后a标签将响应点击和链接

现在，表单示例：用于提交表单的按钮和按钮旁边的链接。他们需要看起来一样。并且链接按钮不应提交表单。但它在形式内......

<a href="#"><button class="coolbutton onclickreturnfalse">I just want to link it</button></a>
<button> Submit </button>

类.onclickreturnfalse绑定到javascript click事件，无论如何都返回false。所以它不会提交表单...但问题是..它也返回false给链接..所以链接不起作用...

抱歉我的描述和标题不好。我现在需要一些意见。网页设计师如何解决这些问题？

＃

所以我把我的CSS放在这里

＃

button,a.bt1,a.bt2,a.bt3{
border: 1px solid rgba(152, 152, 152, 0.1);border-radius: 2px;color: #666666;cursor: pointer;
font-size: 8pt;font-weight: bold;min-width: 54px;padding: 4px 8px;text-align: center;
}
button,button.bt1,a.bt1 { background-color: #F5F5F5; }
button.bt2,a.bt2        { background-color: #F5F5F5; color:#BF0000; }
button.bt3,a.bt3        { background-color: #BF0000; color:#EFEFEF; }
button:hover,a.bt1:hover,a.bt2:hover,a.bt3:hover{
border: 1px solid rgba(208, 0, 0, 0.1); text-decoration:none;
}

认真地......他们看起来有点不同:(

Answer 1

您应该使用按钮或锚点，但我不明白为什么您会在链接中使用按钮。您可以将锚设置为按钮样式，或者只使用按钮处理点击事件。

例如，单击此链接不会导致回发（在浏览器中启用JS）：<a href="#" class="coolbutton" onclick="alert('test'); return false;" />

请建议更好的链接按钮并返回错误的解决方案

1 个答案: