<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">
<div class="container">
<button class="btn-1"><span>Hover Me</span></button>
<button class="btn-2"><span>Hover Me</span></button>
<button class="btn-3"><span>Hover Me</span></button>
<button class="btn-4"><span>Hover Me</span></button>
<button class="btn-5"><span>Hover Me</span></button>
<button class="btn-6"><span>Hover Me</span></button>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=PT+Sans);
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: 'PT Sans', sans-serif;
display: table;
width: 100%;
background: #f54785;
}
.container{
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100vh;
}
button{
display: inline-block;
position: relative;
background: none;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
margin: 20px 30px;
background: rgba(0,0,0,0.09);
}
span{
display: block;
padding: 25px 80px;
}
button::before, button::after{
content:"";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
span::before, span::after{
content:"";
width:2px;
height:0;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
button:hover::before, button:hover::after{
width: 100%;
}
button:hover span::before, button:hover span::after{
height: 100%;
}
/*----- button 1 -----*/
.btn-1::before, .btn-1::after{
transition-delay: 0.2s;
}
.btn-1 span::before, .btn-1 span::after{
transition-delay: 0s;
}
.btn-1::before{
right: 0;
top: 0;
}
.btn-1::after{
left: 0;
bottom: 0;
}
.btn-1 span::before{
left: 0;
top: 0;
}
.btn-1 span::after{
right: 0;
bottom: 0;
}
.btn-1:hover::before, .btn-1:hover::after{
transition-delay: 0s;
}
.btn-1:hover span::before, .btn-1:hover span::after{
transition-delay: 0.2s;
}
/*--- Button 2 -------*/
.btn-2::before, .btn-2::after{
transition-delay: 0s;
}
.btn-2 span::before, .btn-2 span::after{
transition-delay: 0.2s;
}
.btn-2::before{
right: 0;
top: 0;
}
.btn-2::after{
left: 0;
bottom: 0;
}
.btn-2 span::before{
left: 0;
top: 0;
}
.btn-2 span::after{
right: 0;
bottom: 0;
}
.btn-2:hover::before, .btn-2:hover::after{
transition-delay: 0.2s;
}
.btn-2:hover span::before, .btn-2:hover span::after{
transition-delay: 0s;
}
/*----- button 3 -----*/
.btn-3::after{
left: 0;
bottom: 0;
transition-delay: 0.6s;
}
.btn-3 span::after{
transition-delay: 0.4s;
right: 0;
bottom: 0
}
.btn-3::before{
right: 0;
top: 0;
transition-delay: 0.2s;
}
.btn-3 span::before{
transition-delay: 0s;
left: 0;
top: 0;
}
.btn-3:hover::after{
transition-delay: 0s;
}
.btn-3:hover span::after{
transition-delay: 0.2s;
}
.btn-3:hover::before{
transition-delay: 0.4s;
}
.btn-3:hover span::before{
transition-delay: 0.6s;
}
/*----- button 4 -----*/
.btn-4::after{
right:0;
bottom: 0;
transition-duration: 0.4s;
}
.btn-4 span::after{
right:0;
bottom: 0;
transition-duration: 0.4s;
}
.btn-4::before{
left: 0;
top: 0;
transition-duration: 0.4s;
}
.btn-4 span::before{
left: 0;
top: 0;
transition-duration: 0.4s;
}
/*----- button 5 -----*/
.btn-5::after{
left:0;
bottom: 0;
transition-duration: 0.4s;
}
.btn-5 span::after{
right:0;
top: 0;
transition-duration: 0.4s;
}
.btn-5::before{
right: 0;
top: 0;
transition-duration: 0.4s;
}
.btn-5 span::before{
left: 0;
bottom: 0;
transition-duration: 0.4s;
}
/*----- button 6 -----*/
.btn-6::before{
left: 50%;
top: 0;
transition-duration: 0.4s;
}
.btn-6::after{
left: 50%;
bottom: 0;
transition-duration: 0.4s;
}
.btn-6 span::before{
left: 0;
top: 50%;
transition-duration: 0.4s;
}
.btn-6 span::after{
right: 0;
top: 50%;
transition-duration: 0.4s;
}
.btn-6:hover::before, .btn-6:hover::after{
left: 0;
}
.btn-6:hover span::before, .btn-6:hover span::after{
top: 0;
}
