Question

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

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

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

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

任何可以帮助我创建它的想法或参考？

Answer 1

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

这是一个很酷的方式，为按钮提供动态/灵活的大小，并且将你想要的任何html放入其中并不是太难...你必须使用css一点点玩更多的是用于着色，但我认为只需要一点创意css / html就可以了。

首先构建此按钮，然后告诉我们您获得的任何CSS结果！

此外：

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

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

如果你摆脱了一个尺寸限制（例如宽度或高度），你可以放下两个div（即做一个双向推拉门）。

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

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

带有圆角的CSS按钮可对点击作出反应

2 个答案: