Gradient Text, Borders and Backgrounds for Buttons

Gradient Text, Borders and Backgrounds for Buttons

Working with Trillectro has resulted in the use of a lot of gradients. After exploring a few different button styles, I came up with a good solution for gradient ghost buttons with gradient text. To make my life easier, I created a couple of Sass mixins that would allow me to reuse those styles throughout the project when needed.

When creating a class for gradient text, it is best to apply it to a <span> tag so that the gradient is clipped only to the text itself. The pen below shows how those styles are used.

I created a gist to host the mixins along with simple directions on how to use them.

These mixins are best used with Autoprefixer or your favorite postprocessor for cross-browser compatibility.

Enjoy!