<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="btn"> <svg> <rect x="0" y="0" fill="none" width="166" height="45" /> </svg> Watch video </div>

body { background-color: #494949; padding-top: 50px; font-family: 'Open Sans', sans-serif; text-align: center; } * { box-sizing: border-box; } .btn { position: relative; display: inline-block; width: 168px; height: 47px; font-size: 14px; line-height: 37px; text-align: center; text-transform: uppercase; color: #ffffff; cursor: pointer; overflow: hidden; } .btn svg { position: absolute; top: 0; left: 0; } .btn svg rect { stroke: #ffffff; stroke-width: 6; stroke-dasharray: 422, 0; stroke-dashoffset: 0; -webkit-transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1); } .btn:hover svg rect { stroke-width: 10; stroke-dasharray: 110, 312; stroke-dashoffset: 183; }