<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="a"> <a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg "><button class="btn-1 b"><span>Hover Me</span></button></a> <a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg "><button class="btn-2 b"><span>Hover Me</span></button></a> <a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg "><button class="btn-3 b"><span>Hover Me</span></button></a> <a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg "><button class="btn-4 b"><span>Hover Me</span></button></a> <a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg "><button class="btn-5 b"><span>Hover Me</span></button></a> <a href="https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg "><button class="btn-6 b"><span>Hover Me</span></button></a> </div>

.a{ height: 100vh; background: #f54785; } .b{ display: inline-block; position: relative; border: none; color: #fff; font-size: 18px; cursor: pointer; margin: 20px 30px; background-color: rgba(0,0,0,0.09); } .b span{ display: block; padding: 25px 80px; } .b::before, .b::after{ content:""; width: 0; height: 2px; position: absolute; transition: all 0.2s linear; background: #fff; } .b span::before, .b span::after{ content:""; width:2px; height:0; position: absolute; transition: all 0.2s linear; background: #fff; } .b:hover::before, .b:hover::after{ width: 100%; } .b:hover span::before, .b: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; }