<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;
}
