CSS Variables | Buttons Day 67

This will be a quick one. After going through the variables in the codepen preprocessor [SCSS] I realized how wonderful the presence of variables in CSS would be. And I came across this article that’s awesome, and not only that it has a tutorial which I followed along [changed the design though] So without further ado, here’s an illustrated guide of my process.

Started off with the HTML structure

Then I moved to styling. I go from one section to the other.

Okay, I have the style all set up, it’s now time to add the variables and restructure my values based on them At first I needed  a default value and here’s how it looks

 

Awesome, now let’s add some color

and bam, it works! if you’d like to check the demo, here’s a link to the project.

And if interested, here’s my repo of the whole project.

That’s all for today. Happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *