<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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="btn from-top">From Top</div> <div class="btn from-left">From Left</div> <div class="btn from-right">From Right</div> <div class="btn from-middle">From Middle</div> <div class="btn from-bottom">From Bottom</div>

/* ~~~~~~~ INIT. BTN ~~~~~~~ */ .btn { position: relative; padding: 1.4rem 4.2rem; padding-right: 3.1rem; font-size: 1.4rem; color: var(--inv); letter-spacing: 1.1rem; text-transform: uppercase; transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1); user-select: none; } .btn:before, .btn:after { content: ''; position: absolute; transition: inherit; z-index: -1; } .btn:hover { color: var(--def); transition-delay: .6s; } .btn:hover:before { transition-delay: 0s; } .btn:hover:after { background: var(--inv); transition-delay: .4s; } /* From Top */ .from-top:before, .from-top:after { left: 0; height: 0; width: 100%; } .from-top:before { bottom: 0; border: 1px solid var(--inv); border-top: 0; border-bottom: 0; } .from-top:after { top: 0; height: 0; } .from-top:hover:before, .from-top:hover:after { height: 100%; } /* From Left */ .from-left:before, .from-left:after { top: 0; width: 0; height: 100%; } .from-left:before { right: 0; border: 1px solid var(--inv); border-left: 0; border-right: 0; } .from-left:after { left: 0; } .from-left:hover:before, .from-left:hover:after { width: 100%; } /* From Right */ .from-right:before, .from-right:after { top: 0; width: 0; height: 100%; } .from-right:before { left: 0; border: 1px solid var(--inv); border-left: 0; border-right: 0; } .from-right:after { right: 0; } .from-right:hover:before, .from-right:hover:after { width: 100%; } /* From Middle */ .from-middle:before { top: 0; left: 50%; height: 100%; width: 0; border: 1px solid var(--inv); border-left: 0; border-right: 0; } .from-middle:after { bottom: 0; left: 0; height: 0; width: 100%; background: var(--inv); } .from-middle:hover:before { left: 0; width: 100%; } .from-middle:hover:after { top: 0; height: 100%; } /* From Bottom */ .from-bottom:before, .from-bottom:after { left: 0; height: 0; width: 100%; } .from-bottom:before { top: 0; border: 1px solid var(--inv); border-top: 0; border-bottom: 0; } .from-bottom:after { bottom: 0; height: 0; } .from-bottom:hover:before, .from-bottom:hover:after { height: 100%; } /* ~~~~~~~~~~~~ GLOBAL SETTINGS ~~~~~~~~~~~~ */ *, *:before, *:after { box-sizing: border-box; } body { --def: #96B7C4; --inv: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; width: 100%; background-image: linear-gradient(-25deg, #616161 0%, #96B7C4 100%); } html { font-size: 12px; font-family: 'Playfair Display', serif; } div {margin-bottom: 3rem;} div:last-child {margin-bottom: 0;}