使风格化和动画HTML5按钮成为完全可点击的链接

时间:2017-07-14 20:59:05

标签: html css button

我已经制作了一个按钮,其中必须包含图片和文字。这是我目前所拥有的一个例子

https://jsfiddle.net/9c9dnot9/

import sys
sys.setrecursionlimit(3000)

我将其设置为表格的原因是正确调整按钮内图像和文本的对齐和格式。

我可以将图像和标签中的文本包装到href到我要链接的页面....但是你必须单击图片或文本。我希望整个按钮可以点击并重定向到URL。

我已尝试过在众多论坛上找到的每一个提示和技巧,但似乎无法让它发挥作用。事情要么完全失败,要么完全搞砸格式化。

这样做的目的是为SharePoint站点提供一系列链接到某些公司部门的按钮。

我在编码方面有点新,所以解释越多越好!谢谢

2 个答案:

答案 0 :(得分:0)

您可以将整个按钮包装在a标记中,并添加display: block属性,以便根据其内容设置其高度。然后,不要在按钮上设置宽度,而是在链接上设置它,然后将width: 100%添加到按钮,这样您的链接就不会占用其容器的整个宽度,因此您的按钮将更加可维护如果您决定更改,则不必设置链接和按钮的宽度!

这是一个工作小提琴:https://jsfiddle.net/d5tcamok/2/

答案 1 :(得分:0)

按钮不是链接。按钮的目的是与HTML表单交互(例如,提交表单数据)。

如果你想拥有一个看起来像按钮的东西,并且表现得像一个链接,那么我建议你创建一个链接并用CSS设置样式,看起来就像一个按钮。

在您的小提琴中,您实际上只需将<button>标记更改为<a>,它就可以正常工作。

Updated Fiddle