37Making Beautiful Buttons

If we use a semantic <button> tag, Blueprint makes it easy to style that button with a custom look. Just use the tag in your HTML as you normally would, import the required components (see the opposite page for an exact listing), and finally @includebutton-button. Once we’ve included that code, we are ready to style the <button> tags.[15]

As a best practice, if you are doing general styling of all buttons on the site, we recommend doing that in a separate file that you can include. This helps to keep the code more organized. We prefer to use a filename like _button_style.scss.

What if you want to make an <a> look like a button? This is a very common thing to do on the Web. Blueprint makes this easy, too!

First, @include ...

Get Pragmatic Guide to Sass now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.