Animated Button - Appearing Icon

A FontAwesome icon (or other icon of your choice) appears on hover, prompting the user to click and continue on to the next page or bit of content. Its a nice way to include a bit of fun animation and interest in a professional design.

FontAwesome is a great icon library, with a lot of options. If you see an icon on a website, there's a good chance that its a FontAwesome icon. There are free versions of this library available; please note that you will need to install one on your site in order to use the icons.

HTML:

Copy to clipboard

<a href='#'><div id='button-example-1684'>Click here!</div></a>

CSS:

Copy to clipboard

#button-example-1684 {
color: #fffff7; 
background: #3E5837;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
position: relative;
transition: all 0.25s linear 0s;

}
#button-example-1684:hover {
text-indent: -10px;
background: #2C3F27;

}
#button-example-1684:before {
content: "\f105";
font-family: FontAwesome;
font-size: 18px;
line-height: 68px;
position: absolute;
right: 0;
top: 0;
height: 100%;
opacity: 0;
width: 60px;
transition: all 0.25s linear 0s;

}
#button-example-1684:hover:before {
text-indent: 0px;
opacity: 1;

}

Pumpkins n' Pies