3D Transformations are applied here in CSS3 to buttons in muscular fashion. But the CSS3 3D coding is truly long and garrulous [think error prone]. Thus the attraction of CSS preprocessors like LESS and SCSS.
[iframe width=”100%” height=”550″ src=”http://takethe5th.ca” allowfullscreen=”allowfullscreen” frameborder=”0″]
So LESS available in the Codepen test environ was applied to the Buttons with a resulting drop from 182 lines of CSS to 157 in LESS. More important by using a LESS variable @colored we can change the color of the popup in one place – go into the CSS panel and change it and see all the colors in the panel change accordingly.
[iframe src=”http://codepen.io/jbsurveyer/pen/yKLqv” width=’100% height=’550′ allowfullscreen=”allowfullscreen” ]