Bootstrap3 : アイコン用の丸いボタン。「Circle Button」コミット其二。@Bootsnipp
Bootsnippにアイコン用の丸いボタンのCSSコミットしてみました。其一同様大したことしてないです。角丸とサイズの調整をしただけです・・・。
使い方もBoottsrapのボタンのスタイルクラス”.btn”を付けて、丸いボタンにしたければ”.btn-circle”を付ければ丸くなるようなっています。
※念のため:使うにはBootstrap3のCSSを読み込む必要があります。
Example Circle Button@Bootsnipp
Code
<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
<style> .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; } </style>LESS
<style> @import "variables.less"; @import "mixins.less"; .btn-circle{ width: 30px; height: 30px; text-align: center; .button-size(@padding-base-vertical; 0; @font-size-small; @line-height-base; 15px;); &.btn-lg{ width: 50px; height: 50px; .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; 25px;); } &.btn-xl{ width: 70px; height: 70px; .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-h3; @line-height-large; 35px;); } } </style>