"Hover CSS Button "
Bootstrap 4.1.1 Snippet by dkstudio

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section class="portfolio-experiment"> <a> <span class="text">Hover me</span> <span class="line -right"></span> <span class="line -top"></span> <span class="line -left"></span> <span class="line -bottom"></span> </a> </section> </div> </div>
.portfolio-experiment, .scene { height: 100vh; overflow: hidden; display: flex; flex-wrap: wrap; flex-wrap: wrap; -webkit-display: flex; -webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap; position: absolute; top: 0; right: 0; bottom: 0; left: 0; justify-content: center; align-items: center; -webkit-justify-content: center; -webkit-align-items: center; } .portfolio-experiment { background: #2d2d2d; } .portfolio-experiment a { color: white; padding: 0.7em calc(0.7em * 1.2); display: inline-block; border: 3px solid transparent; position: relative; font-size: 1.5em; cursor: pointer; letter-spacing: 0.07em; } .portfolio-experiment a .text { font-family: proxima-nova, monospace; transform: translate3d(0, 0.7em, 0); display: block; transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) 0.4s; } .portfolio-experiment a:after { position: absolute; content: ''; bottom: -3px; left: calc(0.7em * 1.2); right: calc(0.7em * 1.2); height: 3px; background: #f26522; transition: transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s; transform-origin: left; } .portfolio-experiment .line { position: absolute; background: #f26522; } .portfolio-experiment .line.-right, .portfolio-experiment .line.-left { width: 3px; bottom: -3px; top: -3px; transform: scale3d(1, 0, 1); } .portfolio-experiment .line.-top, .portfolio-experiment .line.-bottom { height: 3px; left: -3px; right: -3px; transform: scale3d(0, 1, 1); } .portfolio-experiment .line.-right { right: -3px; transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s; transform-origin: top; } .portfolio-experiment .line.-top { top: -3px; transition: transform 0.08s linear 0.43s; transform-origin: left; } .portfolio-experiment .line.-left { left: -3px; transition: transform 0.08s linear 0.51s; transform-origin: bottom; } .portfolio-experiment .line.-bottom { bottom: -3px; transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01); transform-origin: right; } .portfolio-experiment a:hover .text, .portfolio-experiment a:active .text { transform: translate3d(0, 0, 0); transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s; } .portfolio-experiment a:hover:after, .portfolio-experiment a:active:after { transform: scale3d(0, 1, 1); right: -3px; left: -3px; transform-origin: right; transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s; } .portfolio-experiment a:hover .line, .portfolio-experiment a:active .line { transform: scale3d(1, 1, 1); } .portfolio-experiment a:hover .line.-right, .portfolio-experiment a:active .line.-right { transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s; transform-origin: bottom; } .portfolio-experiment a:hover .line.-top, .portfolio-experiment a:active .line.-top { transition: transform 0.08s linear 0.4s; transform-origin: right; } .portfolio-experiment a:hover .line.-left, .portfolio-experiment a:active .line.-left { transition: transform 0.08s linear 0.48s; transform-origin: top; } .portfolio-experiment a:hover .line.-bottom, .portfolio-experiment a:active .line.-bottom { transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s; transform-origin: left; }

Related: See More


Questions / Comments: