Recreate the outline buttons from Bootstrap using Sass to compile your CSS. You should use the exact HTML from the page and you are welcome to inspect and copy all the properties and values to recreate the buttons. But you need to setup a new project 04-button-set and install sass and write a Sass code in a main.scss file that compiles to your style.css file. If you’re adventurous, you can try writing an @each loop in Sass to create all your .btn-outline-colorname classes in just a few lines of code. The key is to find a way to write dynamic variables using maps. And if you get really clever, you can using a YIQ function in Sass (based on the color-yiq function in bootstrap) to check the contrast value between the background color and the text color. This automates the process of choosing black or white text in the hover state of the buttons.
Your files to upload to the server and link to your blog post should include:
04-button-set/index.html04-button-set/package.json04-button-set/sass/main.scss04-button-set/css/style.css
Leave a comment