CSS - 带有已点击的高级按钮

-1

附加的图片是来自YouTube的快照。当用户点击订阅按钮时，按钮本身上会出现一个小小的绿色复选标记。这是如何完成的？CSS - 带有已点击的高级按钮

This is the snapshot from youtube!

2012-02-16 ahsu

不要问这样的问题，请先做一些研究。使用Chrome控制台，Firebug或与您正在使用的浏览器相关的开发工具。如果你不能使用它，请谷歌并学习它。 – kapa 2012-02-17 08:05:09

如果你使用Firebug检查YouTube的页面，你可以看到它是如何实现的：

本质上，它是这样的：

<button><img src=tick.png></button>

虽然在YouTube上还有很多更继续。

来源

2012-02-16 23:15:14 Howard

将一个background-image属性添加到按钮，也有一个padding-left和padding-right来平衡空间。

DEMO - 带复选标记风格的按钮。

- 单击该按钮以查看复选标记。

来源

2012-02-16 23:16:30

如果你右键点击Chrome中的按钮，并选择“检查元素”，你可以看到正好是它是如何通过css-inspector完成的。

来源

2012-02-16 23:16:40

他们做的比我通常看到一点点不同的方式...

这是一个<button>标签包含一个<img>标签。 img只是一个透明的gif，但img标签通过CSS接收背景。订阅时按钮类会发生变化，并且会更改<img>标记的背景图像（css）。

<button ...><img ... src="...">...</button>

来源

2012-02-16 23:18:47 simshaun

button { 
    background: url('http://www.gettyicons.com/free-icons/112/must-have/png/16/check_16.png') no-repeat 5px; 
    padding: 10px 10px 10px 25px; 
    margin: 10px; 
}

这里的fiddle。你需要一些方法来检查用户是否被订阅，所以你需要一些PHP或JS来查看你的数据库或会话变量。

来源

2012-02-16 23:20:23 thepriebe

是的，我也是这么做的，尽管看起来youtube使用的是按钮内部的图片精灵（好像渐变BG必须使用背景图片应用，这有点奇怪） – Howard 2012-02-16 23:22:31

@ahsu I更新它使用jquery将其从“sub”更改为“subscribed”。这是您寻找的更完整的示例。 [看这里]（http://jsfiddle.net/M2E22/4/） – thepriebe 2012-02-16 23:47:48

CSS - 带有已点击的高级按钮

回答

相关问题