<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="container"> <div class="row"> <div class="col-md-6"> <p> <button class="btn btn-1 btn-1a">Button</button> <button class="btn btn-1 btn-1b">Button</button> <button class="btn btn-1 btn-1c">Button</button> </p> </div> <div class="col-md-6"> <p> <button class="btn btn-1 btn-1d">Button</button> <button class="btn btn-1 btn-1e">Button</button> <button class="btn btn-1 btn-1f">Button</button> </p> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="svg-wrapper"> <svg height="60" width="320"> <rect class="shape" height="60" width="320" /> </svg> <div class="text text-center">HOVER</div> </div> </div> </div> </div>

body{ background: #f58500; } /*commen css=============*/ .btn { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; padding: 25px 80px; display: inline-block; margin: 15px 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; border-radius:0px; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .btn-1 { border: 3px solid #fff; color: #fff; border: 3px solid #fff; } /*BUTTON 1a css=============*/ .btn-1a:hover, .btn-1a:active { color: #0e83cd; background: #fff; } /*BUTTON 1b css=============*/ .btn-1b:after { width: 100%; height: 0; top: 0; left: 0; background: #fff; } .btn-1b:hover:after, .btn-1b:active:after { height: 100%; } .btn-1b:after { width: 100%; height: 0; top: 0; left: 0; background: #fff; } /*BUTTON 1c css=============*/ .btn-1c:hover:after, .btn-1c:active:after { width: 100%; } .btn-1c:after { width: 0%; height: 100%; top: 0; left: 0; background: #fff; } /*BUTTON 1d css=============*/ .btn-1d:after { width: 0; height: 103%; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .btn-1d { overflow: hidden; } .btn-1d:hover:after { width: 90%; opacity: 1; } /*BUTTON 1e css=============*/ .btn-1e:after { width: 100%; height: 0; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); } .btn-1e:hover, .btn-1e:active { color: #0e83cd; } .btn-1e { overflow: hidden; } .btn-1e:hover:after { height: 260%; opacity: 1; } .btn-1f { overflow: hidden; } .btn-1f:after { width: 101%; height: 0; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .btn-1f:hover, .btn-1f:active { color: #0e83cd; } .btn-1f:hover:after { height: 75%; opacity: 1; } .row{ margin-top:80px; } .svg-wrapper { height: 60px; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); width: 320px; } .shape { fill: transparent; stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; stroke: #19f6e8; } .text { color: #fff; font-family: 'Roboto Condensed'; font-size: 22px; letter-spacing: 8px; line-height: 32px; position: relative; top: -48px; } @keyframes draw { 0% { stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; } 100% { stroke-dasharray: 760; stroke-dashoffset: 0; stroke-width: 2px; } } .svg-wrapper:hover .shape { -webkit-animation: 0.5s draw linear forwards; animation: 0.5s draw linear forwards; }