ボタンにしたい要素に .button を指定すると、ボタンの見た目になります。
<button class="button">Default</button>
.button 要素に、さらに用途別の class を追加することで色が変わります。
<button class="button button--primary">Primary</button> <button class="button button--success">Success</button> <button class="button button--warning">Warning</button> <button class="button button--danger">Danger</button>
横幅いっぱいに .button を表示したいときは、さらに .button--block を指定します。
<button class="button button--primary button--block">Primary (Block)</button>
検索フォームを表示したいときは、以下のようにマークアップします。
<form class="search-form" action="#"> <div class="search-form__query"> <input type="search"> </div> <div class="search-form__action"> <button class="button button--block">検索</button> </div> </form>