Wayne State Web Team

Wayne State University Web Team Blog

Simple CSS hover effect using transition property for button with arrow

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!