"CSS Button Hover Effects"
Bootstrap 4.1.1 Snippet by ttorrez

<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> <button type="button" class="btn btn-primary slideup">Primary</button> <button type="button" class="btn btn-secondary slidedown">Secondary</button> <button type="button" class="btn btn-success slideright">Success</button> <button type="button" class="btn btn-danger slideleft">Danger</button> <button type="button" class="btn btn-warning slidetopright">Warning</button> <button type="button" class="btn btn-info slidetopleft">Info</button> <button type="button" class="btn btn-light slidebottomright">Light</button> <button type="button" class="btn btn-dark slidebottomleft">Dark</button> </div> <div> <br /> <button type="button" class="btn btn-outline-primary slideup">Primary</button> <button type="button" class="btn btn-outline-secondary slidedown">Secondary</button> <button type="button" class="btn btn-outline-success slideright">Success</button> <button type="button" class="btn btn-outline-danger slideleft">Danger</button> <button type="button" class="btn btn-outline-warning slidetopright">Warning</button> <button type="button" class="btn btn-outline-info slidetopleft">Info</button> <button type="button" class="btn btn-outline-light slidebottomright">Light</button> <button type="button" class="btn btn-outline-dark slidebottomleft">Dark</button> </div>
.btn{ background: transparent; position: relative; overflow: hidden; transition: all .5s; } /* //// Default effect: Slide from Top //// */ .btn:before, .btn:after{ content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: 100%; z-index: -1; transition: all .5s; } .btn:hover{ color: white; } .btn:hover:after{ transform: translate3D(0,0,0); transition: all .5s; } .btn-primary:before{ background: #007bff; /* button default background color */ } .btn-primary:after{ background: #0000005a; } .btn-primary:hover{ background: #025ec1; } .btn-secondary:before{ background: #6c757d; z-index: -2; } .btn-secondary:after{ background: #5a6268; } .btn-secondary:hover{ background: #5a6268; } .btn-success:before{ background: #28a745; z-index: -2; } .btn-success:after{ background: #218838; } .btn-success:hover{ background: #218838; } .btn-danger:before{ background: #dc3545; } .btn-danger:after{ background: #c82333; } .btn-danger:hover{ background: #c82333; } .btn-warning:before{ background: #ffc107; } .btn-warning:after{ background: #e0a800; } .btn-warning:hover{ background: #e0a800; } .btn-info:before{ background: #17a2b8; } .btn-info:after{ background: #138496; } .btn-info:hover{ background: #138496; } .btn-light:before{ background: #f8f9fa; } .btn-light:after{ background: #e2e6ea; color:#212529; } .btn-light:hover{ background: #e2e6ea; color:#212529; } .btn-dark:before{ background: #6c757d; } .btn-dark:after{ background: #23272b; } .btn-dark:hover{ background: #23272b; } .btn-link:hover{ color: #007bff; } /* //// Outline Buttons //// */ .btn-outline-primary:after{ background: #007bff; } .btn-outline-primary:hover{ background: #007bff; } .btn-outline-secondary:after{ background: #6c757d; } .btn-outline-secondary:hover{ background: #6c757d; } .btn-outline-success:after{ background: #28a745; } .btn-outline-success:hover{ background: #28a745; } .btn-outline-danger:after{ background: #dc3545; } .btn-outline-danger:hover{ background: #dc3545; } .btn-outline-warning:after{ background: #ffc107; } .btn-outline-warning:hover{ background: #ffc107; } .btn-outline-info:after{ background: #17a2b8; } .btn-outline-info:hover{ background: #17a2b8; } .btn-outline-light{ color:#212529; } .btn-outline-light:after{ background: #e2e6ea; color:#212529; } .btn-outline-light:hover{ background: #e2e6ea; color:#212529; } .btn-outline-dark:after{ background: #343a40; } .btn-outline-dark:hover{ background: #343a40; } /* //// Slide Left //// */ .slideright:after{ top: 0; z-index: -1; transform: translate3D(-101%,0,0); } .slideright:hover:after{ transform: translate3D(0,0,0); transition: all .5s; } /* //// Slide Right //// */ .slideleft:after{ top: 0; z-index: -1; transform: translate3D(101%,0,0); } .slideleft:hover:after{ transform: translate3D(0,0,0); transition: all .5s; } /* //// Slide Up //// */ .slideup:after{ top: 0; z-index: -1; transform: translate3D(0,100%,0); /* move elements above button so they don't appear initially */ transition: all .5s;/* onhover background color */ } .slideup:hover:after{ transform: translate3D(0,0,0); transition: all .5s; } /* //// Slide Down //// */ .slidedown:after{ top: 0; z-index: -1; transform: translate3D(0,-100%,0); /* move elements above button so they don't appear initially */ transition: all .5s;/* onhover background color */ } .slidedown:hover:after{ transform: translate3D(0,0,0); transition: all .5s; } /* //// Slide Top Left //// */ .slidetopleft:after{ transform: translate3D(100%,-100%,0); } .slidetopleft:hover:after{ transform: translate3D(0,0,0); transition: all .5s; } /* //// Slide Corner Right //// */ .slidetopright:after{ transform: translate3D(-100%,-100%,0); } .slidetopright:hover:after{ transform: translate3D(0,0,0); transition: all .5s; } /* //// Slide Corner Left //// */ .slidebottomleft:after{ transform: translate3D(100%,100%,0); } .slidebottomleft:hover:after{ transform: translate3D(0,0,0); transition: all .5s; } /* //// Slide Corner Right //// */ .slidebottomright:after{ transform: translate3D(-100%,100%,0); } .slidebottomright:hover:after{ transform: translate3D(0,0,0); transition: all .5s; }

Related: See More


Questions / Comments: