【Skeleton】按钮

Skeleton CDN链接

Skeleton栅格用法

和大多 CSS 栅格化系统一样，Skeleton 也提供了按钮的装饰。

由于 Skeleton 的代码只有 400 行，所以只提供了 2 种按钮的装饰。

Skeleton 的 CSS 会自动装饰特定的 HTML 元素，例如 <button> ，以及类型为 submit 和 button 的表单输入字段，都会被装饰上。

Skeleton 的 CSS 会自将其装饰成灰边白底的按钮，而且有圆角。鼠标提上去之后，边框会变黑。

除了以上特定的 HTML 元素之外，Skeleton 还提供了一些样式把其他元素装饰成按钮。

例如

<a href="http://suo.im/1yaTY3" class="button">雷猴 世界</a>

和上面的样式一样，圆角灰边白底，鼠标经过时边框会变黑。

Skeleton 还提供了蓝色的按钮。类名为：button-primary

<button class="button-primary">button</button>

鼠标经过时，背景会变成深蓝色。

如果想把普通的链接变成上面这种亮丽的蓝色按钮，需要添加两个雷，一个把链接变成按钮的样式，另一个把按钮变成蓝色。

<a href="http://suo.im/1yaTY3" class="button button-primary">雷猴 世界</a>

Skeleton 提供了两种按钮样式。

除了按钮之外，还提供了基础的表单样式、代码样式、连接样式、表格样式、分割线样式等。

个人觉得，Skeleton 这个简单的库真的很适合用来学习，尤其是看其源码。

算上注释，一共 400 多行代码，而且每个模块都有分隔注释。

最后再次放上Skeleton CDN链接