<a href="#">Button <span></span> <span></span> <span></span> <span></span> </a>
body{ margin: 0; padding: 0; background: #f6ff76; } a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 60px; line-height: 60px; background: transparent; text-align: center; text-decoration: none; letter-spacing: 4px; font-family: sans-serif; color: #262626; overflow: hidden; } a span{ display: block; background: #262626; transition: .2s; } a span:nth-child(1), a span:nth-child(3){ position: absolute; height: 2px; width: 100%; } a span:nth-child(2), a span:nth-child(4){ position: absolute; height: 100%; width: 2px; } a span:nth-child(1){ top: 0; left: -100%; transition-delay: 0s; } a span:nth-child(2){ top: -100%; right: 0; transition-delay: .2s; } a span:nth-child(3){ bottom: 0; right: -100%; transition-delay: .3s; } a span:nth-child(4){ bottom: -100%; left: 0; transition-delay: .4s; } a:hover span:nth-child(1){ top: 0; left: 0; } a:hover span:nth-child(2){ top: 0; right: 0; } a:hover span:nth-child(3){ bottom: 0; right: 0; } a:hover span:nth-child(4){ bottom: 0; left: 0; }