Outline Button or Ghost Button : Icon on Hover

twitter logo github logo Updated on ・1 min read

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>

twitter logo DISCUSS
Classic DEV Post from Jan 23

Lost potential of personal computing

Do you remember when computers were fun to explore?

Takane Ichinose profile image
A Front end developer who don't stop studying, and practising.

Hey there reader...

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❀️