<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 class="container"> <div class="row"> <h2 class="text-center page-header">Hover Effect On Button</h2> <button class="btn-change">Button</button> </div> </div>

body { font: 400 1.4rem 'Lato', Verdana, Helvetica, sans-serif; } .btn-change{ height: 50px; width: 100px; background: lightseagreen; margin: 20px; float: left; box-shadow: 0 0 1px #ccc; -webkit-transition: all 0.5s ease-in-out; border: 0px; color: #fff; } .btn-change:hover{ -webkit-transform: scale(1.1); background: #31708f; }