<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">Button Hover Gradient Effect</h2> </div> <div class="row"> <div class="col-md-2"> <div class="button"> <input type="submit" value="send messages" class="wpcf7-form-control wpcf7-submit"> </div> </div> <div class="col-md-2"> <div class="button"> <input type="submit" value="send messages" class="wpcf7-form-control wpcf7-submit"> </div> </div> <div class="col-md-2"> <div class="button"> <input type="submit" value="send messages" class="wpcf7-form-control wpcf7-submit"> </div> </div> <div class="col-md-2"> <div class="button"> <input type="submit" value="send messages" class="wpcf7-form-control wpcf7-submit"> </div> </div> <div class="col-md-2"> <div class="button"> <input type="submit" value="send messages" class="wpcf7-form-control wpcf7-submit"> </div> </div> <div class="col-md-2"> <div class="button"> <input type="submit" value="send messages" class="wpcf7-form-control wpcf7-submit"> </div> </div> </div> </div>

.button .wpcf7-submit { background-image: linear-gradient(to right,#ff00cc 0%,#333399 51%,#ff00cc 100%); background-size: 200% auto; color: #ffffff !important; border-radius: 25px; font-weight: 400; font-size: 14px; text-transform: uppercase; border: none !important; transition: 0.7s all; -webkit-transition: 0.7s all; margin-top: 14px; display: inline-block; width: 192px; height: 40px; } .button .wpcf7-submit:hover{ background-position: right center; }