bootstrap3-Button 按钮
<!DOCTYPE html><html><head><title>Default buttons from Bootstrap 3</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap --><link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"rel="stylesheet" media="screen"><style>body {padding: 50px}</style><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--></head><body><!-- Standard button --><!-- 标准按钮 --><button type="button" alt="bootstrap3-Button 旋钮"><!DOCTYPE html><html><head><title>Default buttons from Bootstrap 3</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap --><link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"rel="stylesheet" media="screen"><style>body {padding: 50px}</style><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--></head><body><!-- 大按钮 --><button type="button" alt="bootstrap3-Button 旋钮">
<!-- 大小：大，样式：成功--><button type="button" alt="bootstrap3-Button 旋钮">
??
<div alt="bootstrap3-Button 旋钮">
<button type="button" disabled="disabled">btn1</button><button type="button" disabled="disabled">btn2</button><button type="button" disabled="disabled">btn3</button><button type="button" disabled="disabled">btn4</button>
?
?
将超链接变成按钮（保留链接功能），还可以设置为禁用，很强大噢！
role属性是为了提供更好的目标可达性
<a href="http://www.baidu.com" role="button">Default</a><a href="http://www.baidu.com" role="button">Primary</a><a href="http://www.baidu.com" role="button">Info</a>
?
?
使用按钮样式实现Tag，很漂亮哈~
You may use button classes with button, a and input element to use buttons as tags. But it is recommended that you use it with button elements mostly. Otherwise it may cause cross browser inconsistency issues.
可以使用button样式做Tag
该样式建议多用于按钮元素，否则在不同浏览器下可能会发生问题
?
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Default buttons from Bootstrap 3</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap --><link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"rel="stylesheet" media="screen"><style>body {padding: 50px}</style><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--></head><body><div href="#" role="button">Link</a></p></div><div type="submit">Button</button></p></div><div value="Input"></p><p><input type="button" value="Input"></p></div><div value="Submit"></p><p><input type="submit" value="Submit"></p></div></div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script></body></html>?
?
?
自定义按钮样式?
?
<!-- 使用bootstrap提供的按钮样式 --><button type="button" name="code">.btn-my {background: #cb60b3; /* Old browsers */background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cb60b3),color-stop(50%, #ad1283), color-stop(100%, #de47ac) ); /* Chrome,Safari4+ */ background : -webkit-linear-gradient( top, #cb60b3 0%,#ad1283 50%, #de47ac 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* Opera 11.10+ */background: -ms-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* IE10+ */background: linear-gradient(to bottom, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3',endColorstr='#de47ac', GradientType=0 ); /* IE6-9 */}
?
设置字体颜色
.btn-my{color:#fff;}
将按钮变为圆形
.btn-my{width: 200px; height: 200px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
?
?
最后，再添加鼠标悬停效果
.btn-my:hover { background: #BFEC3E; color:#e75616;}
?
?
?
?
?
?
?
