基本用法: <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p> <p>Search icon: <span…
November 10, 2015
Bootstrap 3 圆形按钮 circle button
HTML:
<button type="button" class="btn btn-default btn-circle"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-primary btn-circle"><i class="glyphicon glyphicon-list"></i></button> <button type="button" class="btn btn-success btn-circle"><i class="glyphicon glyphicon-link"></i></button> <button type="button" class="btn btn-info btn-circle"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-warning btn-circle"><i class="glyphicon glyphicon-remove"></i></button> <button type="button" class="btn btn-danger btn-circle"><i class="glyphicon glyphicon-heart"></i></button> <h2>lg</h2> <button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-primary btn-circle btn-lg"><i class="glyphicon glyphicon-list"></i></button> <button type="button" class="btn btn-success btn-circle btn-lg"><i class="glyphicon glyphicon-link"></i></button> <button type="button" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-warning btn-circle btn-lg"><i class="glyphicon glyphicon-remove"></i></button> <button type="button" class="btn btn-danger btn-circle btn-lg"><i class="glyphicon glyphicon-heart"></i></button> <h2>xl</h2> <button type="button" class="btn btn-default btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-primary btn-circle btn-xl"><i class="glyphicon glyphicon-list"></i></button> <button type="button" class="btn btn-success btn-circle btn-xl"><i class="glyphicon glyphicon-link"></i></button> <button type="button" class="btn btn-info btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-warning btn-circle btn-xl"><i class="glyphicon glyphicon-remove"></i></button> <button type="button" class="btn btn-danger btn-circle btn-xl"><i class="glyphicon glyphicon-heart"></i></button>
CSS:
body{margin:40px;} .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; }
如何想取消hover的效果,可以将button标签换成span便签
<span class="btn btn-default btn-circle-micro white"></span> <span class="btn btn-default btn-circle-micro red"></span> <span class="btn btn-default btn-circle-micro blue"></span> <span class="btn btn-default btn-circle-micro green"></span> <span class="btn btn-default btn-circle-micro yellow"></span> <span class="btn btn-default btn-circle-micro brown"></span> <span class="btn btn-default btn-circle-micro purple"></span>
转自:http://bootsnipp.com/snippets/featured/circle-button
更多参考:
Bootstrap 字体图标 Bootstrap Glyphicon Components
Bootstrap 3 : 图片上传预览 image upload preview
Bootstrap 3: 图标转换事件 Change icons when toggle
本文:Bootstrap 3 圆形按钮 circle button