To attract the user with different smoothly animation effects using several css properties such as color, background color, border-color, and outline color for search box. It was achieved by jQuery’s animate() method let’s look at the example.

Example:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>color animationeffect on search button click</title>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <style type="text/css">
        input {
            width: 200px;
            height: 40px;
            border: 1px solid #B6BBBF;
            font-size:19px;
        }
        .btn {
            width: 100px;
            height: 50px;
            background: #00BCD4;
            border-style: solid;
            border-color: white;
            color: white;
        }
    </style>
    <script type="text/javascript">
       $(document).ready(function () {
            $("#btnsearch").click(function (e) {
               e.preventDefault();
                var input = $(this).prev();
                if (input.val() == "") {
                   input.animate({
                       backgroundColor: "#f78080",
                       borderTopColor: "#a72b2e",
                       borderRightColor: "#a72b2e",
                       borderBottomColor: "#a72b2e",
                       borderLeftColor: "#a72b2e"
                   }, 1200);
               } else {
                   input.animate({
                       backgroundColor: "#CDDC39",
                       borderTopColor: "#C9D64D",
                       borderRightColor: "#E7F37A",
                       borderBottomColor: "#E7F37A",
                       borderLeftColor: "#C9D64D"
                   }, 1200);
               };
            });
 
        });
    </script>
</head>
<body style="border: 1px solid #DED8D8; width: 500px; height: 250px; font-family: Arial;">
    <h1 style="color: #E91E63">color animation effect on search button click  </h1>
    <input>
    <button class="btn" id="btnsearch">Search</button>
</body>
</html>

Output: