Bootstrap3 : アイコン用の丸いボタン。「Circle Button」コミット其二。@Bootsnipp

btn-circle

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>
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

sixteen − four =