bootstrapのボタンをカスタマイズする方法

Bootstrapのボタンをカスタマイズする方法です。

###サイズなどを変えたい場合

ステップ１　下記をCSSファイルに追加します。数字などの設定はお好きなものに変更してください。

.btn {
    padding: 14px 24px;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

ステップ２　ボタンのclassにbtnがない場合は追加します。

例：

<%= link_to "こちらをクリック", something_path, class: "btn btn-primary" %>

###アウトラインのみのボタンにしたい場合

ステップ１　下記をCSSファイルに追加します。数字はお好きなものに変更してください。

.btn.outline {
	background: none;　 //背景をなしにします
	padding: 12px 22px;
}

ステップ２　ボタンのclassにoutlineを追加します。
例：

<%= link_to "こちらをクリック", something_path, class: "btn outline btn-primary" %>

###好きな色に変えたい場合

CSSファイルの中に下記を追加します。”好きな色”の部分をお好きな色に変更してください。

.btn-primary {
    background: 好きな色; //ボタンの背景色
    color: 好きな色; //ボタンのテキストの色
}

.btn-primary:hover, .btn-primary:focus, 
.btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:active.focus,
.btn-primary.active, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary, 
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus, 
.open > .dropdown-toggle.btn-primary.focus,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus {
    background: 好きな色; //ボタンの上にポインタを持ってきたり、クリックしたりした時の背景色
    color: 好きな色; //ボタンの上にポインタを持ってきたり、クリックしたりした時のテキストの色
}

.btn-primary.outline {
	border: 3px solid 好きな色; //アウトラインのみのボタンの線の色
	color: 好きな色; //アウトラインのみのボタンのテキストの色
}

###クリック時のボタンの色について

上記のようにdisabledのクラスをCSSに追加しておかないと、クリックしてからページを移動するまでの間のボタンの色がオリジナルのままになってしまいます。

###メモ

上記はbtn-primaryを例にしていますが、基本bootstrapのボタンクラスであればなんでも変えられます(例：btn-infoやbtn-warningなど）。