Foundation 4.2.2

HTML

<link rel="stylesheet" href="http://techef.net/tools/fiddle-foundation/4/css/normalize.css">
<link rel="stylesheet" href="http://techef.net/tools/fiddle-foundation/4/css/foundation.min.css">
<script src="http://techef.net/tools/fiddle-foundation/4/js/vendor/jquery.js"></script>
<script src="http://techef.net/tools/fiddle-foundation/4/js/vendor/custom.modernizr.js"></script>
<script src="http://techef.net/tools/fiddle-foundation/4/js/foundation.min.js"></script>
<script src="http://s17.postimg.org/b08oxgl5r/arrow.png"></script>
<body>

	<div class="row">
		<div class="small-6 columns">
            <a href="#" class="arrow">Get Started!</a>
		</div>
        <div class="small-6 columns">
            <a href="#" class="arrow">Get Started!</a>
		</div>
	</div>
</body>

CSS

.arrow {
    background: url("http://s17.postimg.org/b08oxgl5r/arrow.png") no-repeat;
    display: block;
    
    height: 0;
    background-size: 100%;
    padding-bottom:39%; /* bg-height / bg-width * 100*/
}

.arrow:hover {
    background-position: 0 100%;
}

JavaScript

$(document).foundation();