<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <a href="#">Button</a>

body { margin:0; padding:0; } a { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:10px 30px; background:#fff; border:2px solid #262626; font-family:sans-serif; color:#262626; text-decoration:none; text-transform:uppercase; font-size:24px; display:block; overflow:hidden; } a:before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#ff0ff0; z-index:-1; transform-origin: bottom left; transform:rotate(-90deg); transition:0.5s; } a:hover:before { transform:rotate(0deg); }