<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"> <h2 class="text-center">Hover style</h2> <div class="col"><a href="!#" class="before-after">Button</a></div> <div class="col"><a href="!#" class="arrow arrow-up">arrow-up</a></div> <div class="col"><a href="!#" class="arrow arrow-down">arrow-down</a></div> <div class="col"><a href="!#" class="arrow arrow-left">arrow-left</a></div> <div class="col"><a href="!#" class="arrow arrow-right">arrow-right</a></div> <div class="col-12 copy-right text-center">© 03/2018 - <span id="copyright"></span></dv> </div> </div>

h2 { width: 100%; } span { color: red; } .arrow { position: relative; } .arrow:before { position: absolute; content: ""; right: -20px; top: 50%; margin-top: -1px; width: 0; height: 0; transition: all 0.3s; } .arrow:hover:before { transform: rotate(180deg); } .arrow-up:before { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; } .arrow-down:before { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #f00; } .arrow-right:before { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid green; } .arrow-left:before { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right:5px solid blue; } .copy-right { font-size: 30px; } .before-after { font-size: 19px; letter-spacing: 5px; width: max-content; position: relative; text-decoration: none !important; } .before-after:before, .before-after:after { content: ''; position: absolute; background: #333; height: 3px; bottom: -3px } .before-after:before { width: 100%; right: 0; transition: all 1.5s } .before-after:after { width: 0; left: 0; transition: all 0.3s } .before-after:hover:before { background: transparent; transition: all 0.3s; width: 0 } .before-after:hover:after { width: 100%; transition: all 1.5s }

var d = new Date(); var copyright = d.getFullYear(); document.getElementById("copyright").innerHTML = copyright;