Html, Css - On hover style not working for submit form input type

This is my html form inside a card html. This form appears after an onlick function which works fine. But the submit button of the below form doesn't show hover effect.

<!-- Update details form here -->
                    <div class="UpdateForm-section">
                        <form action="/add_address" method="post">
                            <label>Car Name</label>
                            <input type="text" value="" name="ev_name" placeholder="Model name"><br>
                            <label>Manufacturer</label>
                            <input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
                            <label>Year</label>
                            <input type="number" value="" name="ev_year" placeholder="YYYY"><br>
                            <label>Battery size</label>
                            <input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
                            <label>Range</label>
                            <input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
                            <label>Cost</label>
                            <input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
                            <label>Power</label>
                            <input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
                            <br>
                            <input type="submit" id="update_submit" value="Update details" name="submit_button"/>
                        </form>
                    </div>

And my css file is:

#update_submit {
  width: auto;
  background-color: #4CAF50;
  color: white;
  padding: 6px 10px;
  margin: 4px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#update_submit : hover {
  background-color: #ab1313;
}

I don't why my hover effect isn't visible. Am I doing anything wrong? Can anyone help me out?