<a href="#" class="uk-btn" data-btn="Btn Hover Effect">Btn Hover Effect</a>
* { box-sizing: border-box; } body { padding-top: 100px; text-align: center; background: #222; } [data-btn] { display: inline-block; padding: 12px 18px; text-decoration: none; position: relative; border: 2px solid #fff; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.1em; text-align: left; color: #fff; overflow: hidden; } [data-btn]:before, [data-btn]:after { content: attr(data-btn); padding-top: inherit; padding-bottom: inherit; white-space: nowrap; position: absolute; top: 0; overflow: hidden; color: #222; background: #fff; } [data-btn]:before { left: 0; text-indent: 18px; width: 0; } [data-btn]:after { padding-left: inherit; padding-right: inherit; left: 100%; text-indent: calc(-100% - 36px); transition: 0.2s ease-in-out; } [data-btn]:hover:before { width: 100%; transition: width 0.2s ease-in-out; } [data-btn]:hover:after { left: 0; text-indent: 0; transition: 0s 0.2s ease-in-out; }