<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="main"> <a class="filled-button hover-outline-out hide-on-mobile" href="#">SIGN UP</a> </div>

body { text-align:center; } .main { padding:50px; } .filled-button { background-color: #46D186; color: white; font-size: 16px; text-decoration: none; padding-top: 12px; padding-bottom: 12px; padding-left: 50px; padding-right: 50px; letter-spacing: 1px; } .hover-outline-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0,0,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hover-outline-out:before { content: ''; position: absolute; border: #46D186 solid 3px; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top,right,bottom,left; transition-property: top,right,bottom,left; } .hover-outline-out:hover:before, .hover-outline-out:focus:before, .hover-outline-out:active:before { top: -6px; right: -6px; bottom: -6px; left: -6px; border: #46D186 solid 3px; } a:hover { color:#fff; text-decoration:none; }