1

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

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

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

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

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

4

2 回答 2

1

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

这是为按钮设置动态/灵活大小的一种很酷的方式，并且在其中放置您想要的任何 html 都不会太难......您必须更多地使用 css 来着色，但我认为你应该对一些有创意的 css/html 没问题。

从构建此按钮开始，并让我们了解您获得的任何 CSS 结果！

添加：

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

于 2009-03-20T14:42:16.237 回答
0

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

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。

于 2009-03-24T00:24:42.537 回答