To create a simple button animation you can use the following code.  In this case we are using the Foundation framework (opens new window) to add simple style to the button.

Here are the results:

[codepen_embed height="162" theme_id="dark" slug_hash="pKoeMa" default_tab="result" user="tomkrupka3"]See the Pen Simple Button with arrow hover animation (opens new window) by Tom Krupka (@tomkrupka3 (opens new window)) on CodePen (opens new window).[/codepen_embed]

Here is the code below:

// HTML Output Read More

// Button CSS Code a.button { margin: 20px; font-size: 20px; }

.arrow { color: #0c5449; background-color: #f6f3ed; margin: 1em 0;

&::after {
    display: inline-block;
    padding-left: 8px;
    content: "279E"; // arrow right unicode
    -webkit-transition: transform 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out;
    -ms-transition: transform 0.3s ease-out;
    -o-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

&:hover {
    color: #0c5449;
    background-color: #f6f3ed;

    &::after {
        -webkit-transform: translateX(4px);
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -o-transform: translateX(4px);
        transform: translateX(4px);
    }
}

}

The result is a very simple hover button, with a subtle animation to catch the users attention. This effect can be used with any Unicode character and don't forget to add your vendor prefixes!