Animated Button - Appearing Icon

In this example, an icon appears on hover, inviting users to click and proceed to the next page or content. This adds a subtle, engaging animation while maintaining a professional look.

The icon is inserted via a ::before pseudo-element, initially set to opacity 0. On hover, its opacity transitions to 1, while the main text is indented - creating the effect of the text sliding aside to reveal the icon.

FontAwesome is a popular icon library with many options, often seen on websites. Free versions are available, but you’ll need to install the library on your site to use the icons. Browse the full collection and get installation details here.

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;
transition: all 0.25s linear 0s;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
position: relative;

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