Applying style to the buttons

Our design contains several buttons now: the button in the footer, the search button, the toggle button for the off-canvas menu, and also the button of the comment form. Let's find a better solution to style the button of our theme.

Remember that you can apply Bootstrap's btn and btn-* CSS classes on the <button> tag and also use them on <a> and <input> tags.

First, create a new Sass partial called assets/scss/includes/_buttons.scss and then move the btn-accent-color selector into it. The assets/scss/includes/_buttons.scss file should contain the following SCSS code:

.btn-accent-color { 
  @include button-variant(#fff, $accent-color, #fff); 
} 

Again we'll have two strategies to style the buttons of the theme. We can adopt the HTML code and make sure that every button has the required btn and btn-* CSS classes. Or alternatively create some generic CSS selectors to style the buttons.

When using generic selectors in the assets/scss...