DEV Community


Outline Button or Ghost Button : Icon on Hover

takaneichinose profile image Takane Ichinose Updated on ・1 min read


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 -->


Editor guide