【Skeleton】按钮

熔岩1.jpg

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

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

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

rabbit

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

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

例如

HTML代码

<a href="http://suo.im/1yaTY3" class="button">Web简书</a>

rabbit

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

image.png

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

HTML代码

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

image.png

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

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

HTML代码

<a href="http://suo.im/1yaTY3" class="button button-primary">Web简书</a>

image.png

---

希望以上笔记对大家有帮助。
我的其他笔记在微信公众号：Rabbit_svip
欢迎前来点评~

微信订阅号：rabbit