Javascript 带有圆角的CSS按钮，可对单击作出反应

我正在尝试创建一个特殊的CSS按钮，如下所述：

基本上，它是一个满足以下条件的按钮：

• 内部文本是HTML内容（它是 将包含文本+图像）
• 它有圆角
• 当鼠标悬停时，它会改变颜色
• 灵活的宽度和高度
• 这是一个单选按钮，单击按钮上的任何位置都可以激活

有什么想法或参考资料可以帮助我创建它吗？

这是一种为按钮提供动态/灵活大小的很酷的方法，并且将您想要的html放入其中也不会太难。。。为了着色，您必须多使用一些css，但我认为您只需使用一点创造性的css/html就可以了

从构建这个按钮开始，让我们知道你得到的任何css结果

补充：

现在没有时间尝试，但是在html中做一个单选按钮，文本和图像，使用该链接进行灵活的标注，然后在css中悬停颜色更改。。。再次通知我们

这是一种为按钮提供动态/灵活大小的很酷的方法，并且将您想要的html放入其中也不会太难。。。为了着色，您必须多使用一些css，但我认为您只需使用一点创造性的css/html就可以了

从构建这个按钮开始，让我们知道你得到的任何css结果

补充：

---

现在没有时间尝试，但是在html中做一个单选按钮，文本和图像，使用该链接进行灵活的标注，然后在css中悬停颜色更改。。。再次通知我们

我只想说这太乱了。这是未经测试的，但使用尽可能少的元素。这是一个四向滑动门

HTML:

如果你摆脱了其中一个尺寸限制（例如宽度或高度），你可以放下两个

div

s（即制作一个双向滑动门）

使用这两种技术，您都可以通过创建gif或png来优化图像，在片段之间具有足够的透明度，以超过按钮将体验到的最大宽度和高度界限。每个状态一个，这将允许您只需要两个图像，而不是八个

---

稍加考虑，您可能也会发现如何使用基于百分比或像素的背景定位将两种状态合并到一张图像中。这将允许您简化CSS。

我只想说这是相当混乱的。这是未经测试的，但使用尽可能少的元素。这是一个四向滑动门

HTML:

如果你摆脱了其中一个尺寸限制（例如宽度或高度），你可以放下两个

div

s（即制作一个双向滑动门）

使用这两种技术，您都可以通过创建gif或png来优化图像，在片段之间具有足够的透明度，以超过按钮将体验到的最大宽度和高度界限。每个状态一个，这将允许您只需要两个图像，而不是八个

稍加考虑，您可能也会发现如何使用基于百分比或像素的背景定位将两种状态合并到一张图像中。这将允许您简化CSS

<a href="your-url-here" class="button">
  <div class="inner-1">
    <div class="inner-2">
      <div class="inner-3">
        Your stuff
      </div>
    </div>
  </div>
</a>

a.button {
  background: url('topleft-image-url') no-repeat top left;
  display: block;
  float: left;
}

  a.button .inner-1 { url('topright-image-url') no-repeat top right; }
  a.button .inner-2 { url('bottomright-image-url') no-repeat bottom right; }
  a.button .inner-3 {
    url('bottomleft-image-url') no-repeat bottom left;
    padding: 0.5em;
  }

  // You still need to re-speicify the extra attributes of background for browser compatibility
  a.button:hover { background: url('topleft-image-url-over') no-repeat top left; }

    a.button:hover .inner-1 { url('topright-image-url-over') no-repeat top right; }
    a.button:hover .inner-2 { url('bottomright-image-url-over') no-repeat bottom right; }
    a.button:hover .inner-3 { url('bottomleft-image-url-over') no-repeat bottom left; }