<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="animbrand"><a class="navbar-brand" href="http://bootsnipp.com">Bootsnip</a></div>

.navbar>.container .navbar-brand { margin-left: -15px; } .navbar-default .navbar-brand { color: #777; } .navbar-brand { float: left; padding: 15px 15px; font-size: 18px; line-height: 20px; } a { color: #428bca; text-decoration: none; } div.animbrand a:hover, div.animbrand a:focus { outline: none; } .animbrand a::before, .animbrand a::after { display: inline-block; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } .animbrand a::before { margin-right: 3px; content: '<'; color:#428bca; font-size: 22px; line-height: 16px; -webkit-transform: translateX(50px); -moz-transform: translateX(50px); transform: translateX(50px); } .animbrand a::after { margin-left: 3px; content: '>'; color:#428bca; font-size: 22px; line-height: 16px; -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); transform: translateX(-50px); } .animbrand a:hover::before, .animbrand a:hover::after, .animbrand a:focus::before, .animbrand a:focus::after { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); }