htmlbutton形状,【8个实例】纯CSS按钮（button），简单漂
亮实⽤
本⽂介绍6个纯CSS按钮(button)实例，漂亮⼜实⽤，代码使⽤简单，⼜具有很强的可迁性，基本上在任何⼀张⽹页都能很容易就能⽤上这些按钮样式。
纯CSS按钮(button)
实例1：普通按钮
创建⼀个普通按钮，只需在或元素添加pure-button类。
普通按钮
普通按钮
实例2：不可⽤按钮(disabled button)
css简单网页代码要创建⼀个不可⽤按钮，只需在元素⾥添加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-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); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */ }
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */ }
成功按钮
错误按钮
警告按钮
次级按钮
实例6：不同⼤⼩的按钮
类似实例5，我们还可以⾃定义不同⼤⼩的按钮样式。
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
超⼩按钮
⼩按钮
普通按钮
⼤按钮
超⼤按钮
实例7：字体图标按钮
字体图标按钮很酷很实⽤，这⾥我们要⽤到Font Awesome字体库⽂件。
⾸先要在html代码⾥引⽤Font Awesome CSS⽂件，然后在使⽤pure-button类的元素⾥添加⼀个元素。
设置
购买
实例8：按钮组
⼀⾏把多个按钮放在⼀起。
普通按钮
普通按钮
活动按钮

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。