Outline Button or Ghost Button : Icon on Hover

Description

Outline button (or Ghost button): When hovered, the icon hidden from the left side will show.

There are small, and large size for these buttons.

I used Font Awesome for the icon font. Some others may be used, I think.

Style can be easily customized, and also, almost all of the customizable styles are stored in a variable.

How to use

<!--
Available classes:
.default (Dark grey button)
.primary (Blue button)
.success (Green button)
.warning (Yellow button)
.danger  Red button)
-->
<button class="btn-outline success">
    <i class="fas fa-check-circle"></i><!-- All of the icons from FontAwesome may be used -->
    <span>success</span>
</button>

---