<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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> <span class="a">H</span><span class="b">A</span><span class="b">R</span><span class="b">U</span><span class="b">T</span> </div> <span>Hover me.</span>

@import url(http://fonts.googleapis.com/css?family=Changa+One); body { background: #ddd; font-family: 'Changa One', cursive; margin: 0; text-align: center; } div { display: block; width: 700px; margin: 0px auto; padding: 0 100px 20px 0; } .a, .b { line-height: 400px; font-size: 500px; letter-spacing: -100px; color: #FFCE54; text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6); transition: all 2s; } .b { color: #444; position: relative; } .b:after { display: block; content: ''; position: absolute; height: 0; width: 30px; bottom: 94px; left: 0px; border-bottom: 313px solid #37BC9B; border-right: 100px solid transparent; background: transparent; transition: border-bottom 1s, left 2s, width .5s, border-right .3s; } div:hover span { margin: 0 70px; } div:hover .b:after { border-bottom: 0px solid transparent; left: -100px; width: 0; border-right: 0px solid transparent; } div:hover { cursor: pointer; }