对点击做出反应的带圆角的 CSS 按钮答案

【问题标题】：CSS button with rounded corners that reacts to clicks对点击做出反应的带圆角的 CSS 按钮
【发布时间】：2009-03-20 14:33:06
【问题描述】：

我正在尝试创建此处描述的特定 CSS 按钮：

http://www.2shared.com/file/5131551/412bd8a8/Sans_titre-1_copie.html

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

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

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

【问题讨论】：

标签： javascript css button

【解决方案1】：

http://css-tricks.com/video-screencasts/17-sliding-doors-button/

这是为按钮设置动态/灵活大小的一种很酷的方式，并且在其中放置您想要的任何 html 都不会太难...您必须稍微使用一下 css更多用于着色，但我认为你应该只需要一点创造性的 css/html。

从构建此按钮开始，并随时向我们发布您获得的任何 CSS 结果！

补充：

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

【讨论】：

【解决方案2】：

我只想说这很混乱。这是未经测试的，但使用了尽可能少的元素。这是一扇四向推拉门。

HTML：

<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>

CSS：

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; }

如果您摆脱了其中一个尺寸限制（例如宽度或高度），您可以放下两个divs（即制作一个双向推拉门）。

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

稍加思考，您可能会想出如何使用基于百分比或像素的背景定位将这两种状态合并到一个图像中。这也可以让您简化 CSS。

【讨论】：