O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required