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 to add simple style to the button.

Here are the results:

See the Pen Simple Button with arrow hover animation by Tom Krupka (@tomkrupka3) on CodePen.dark

Here is the code below:

// HTML Output
<a class="button arrow">Read More</a>
// 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!

Leave a Reply

Your email address will not be published. Required fields are marked *