html and css with bootstrap error

Error:showing a cursor at the top but not in the middle on button

my code is

 <button type="submit"  value="Add" class="btn btn-sm  btn-primary"style="float:right">Add To Cart</button> 

my image

Solution
reason

The reason why your button is showing a cursor at the top but not in the middle is because of the float: right property. This property floats the button to the right of its container, which causes it to be taken out of the normal flow of the document. As a result, the cursor is not displayed over the middle of the button.

To fix this, you can either remove the float: right property or add the position: relative property to the button element. This will cause the button to be positioned relative to its container, and the cursor will be displayed over the entire button.

Here is an example of how to update your code to include the position: relative property:

 <button type="submit"  value="Add" class="btn btn-sm  btn-primary" style="position: relative;float:right">Add To Cart</button>