本文介绍6个纯CSS按钮(button)实例,漂亮又实用,代码使用简单,又具有很强的可迁性,基本上在任何一张网页都能很容易就能用上这些按钮样式。
纯CSS按钮(button)
实例1:普通按钮
创建一个普通按钮,只需在或元素添加pure-button类。
普通按钮
普通按钮
实例2:不可用按钮(disabled button)
要创建一个不可用按钮,只需在元素里添加pure-button类和pure-button-disabled类,或者在元素里,添加pure-button类,同时添加disabled属性。
不可用按钮
不可用按钮
实例3:活动按钮(active button)
当你要标识已经点击过的按钮时,可在或元素里添加一个pure-button-active类。
活动按钮
活动按钮
实例4:主要按钮
当你要显示哪些是主要按钮时,可在或元素里添加一个pure-button-primary类。
主要按钮
主要按钮
实例5:自定义按钮样式
为了自定义按钮样式,你应该把你的自定义CSS归组到一个类,如button-foo,然后把这个类加到已经加了pure-button类的元素里。这里是一些例子。
。button-success,
。button-error,
。button-warning,
。button-secondary?{
color:?white;
border-radius:?4px;
text-shadow:?0?1px?1px?rgba(0,?0,?0,?0.2);
}
。button-success?{
background:?rgb(28,?184,?65);?
}
。button-error?{
background:?rgb(202,?60,?60);?
}
。button-warning?{
background:?rgb(223,?117,?20);?
}
。button-secondary?{
background:?rgb(66,?184,?221);?
}
成功按钮
错误按钮
警告按钮
次级按钮
实例6:不同大小的按钮
类似实例5,我们还可以自定义不同大小的按钮样式。
。button-xsmall?{
font-size:?70%;
}
。button-small?{
font-size:?85%;
}
。button-large?{
font-size:?110%;
}
。button-xlarge?{
font-size:?125%;
}
超小按钮
小按钮
普通按钮
大按钮
超大按钮
实例7:字体图标按钮
字体图标按钮很酷很实用,这里我们要用到Font Awesome字体库文件。
首先要在html代码里引用Font Awesome CSS文件,然后在使用pure-button类的元素里添加一个元素。
设置
购买
实例8:按钮组
一行把多个按钮放在一起。
普通按钮
普通按钮
活动按钮
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery