代码之家 › 专栏 › 技术社区 › Gad

带有圆角的CSS按钮,可对单击做出反应

button css javascript

Gad · 技术社区 · 15 年前

我尝试创建一个特定的CSS按钮,如下所述:

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

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

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

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

2 回复 | 直到 10 年前

phi 15 年前

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

这是一个很酷的方式,有一个动态/灵活的按钮大小,它不会太难把你想要的HTML放在里面…你应该多用一点CSS来着色,但我认为你应该可以使用一些有创意的CSS/HTML。

首先建立这个按钮,并保持我们的任何CSS结果,你得到!

添加:

现在没有时间尝试,但是在HTML中使用一个带有跨度的单选按钮、文本和图像,使用该链接进行灵活的尺寸标注,然后在CSS中悬停颜色更改…再次通知我们!

Aupajo 15 年前

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

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 S(即制作一个双向滑动门)。

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

经过一点思考,你可能也能找到如何将两个状态合并成一个单一的图像,使用百分比或像素为基础的背景定位。这也可以简化CSS。