Button Border Radius and Cursor

Button border radius and cursor

It's not actually "broken", since it's the way it's supposed to work, so you can't really fix it, all elements render as rectangles in the browser (if you inspect the round button, you'll see it covers a rectangular area)

You can either (as @Greg pointed out) use the <area> tag, or you can use JavaScript to do the following:

If outside the circle coords, show a regular mouse icon; If inside, show a pointer
If outside the circle coords, return false in the onclick method; If inside, return true.

Change button border on hover

.button {
          margin-right: 20px;
          width:300px;
          height:300px;
          background-color: transparent;
          border:none;
  }
  .button:hover {
        border: 2px solid  blue;
        border-radius: 20px;
        cursor:pointer;
            }

<input type="button" class = "button"   value="Panda"
/>

How to get the cursor to change to the hand when hovering a button tag

see:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

so you need to add: cursor:pointer;

In your case use:

#more {
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;
}

This will apply the curser to the element with the ID "more" (can be only used once). So in your HTML use

<input type="button" id="more" />

If you want to apply this to more than one button then you have more than one possibility:

using CLASS

.more {
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;
}

and in your HTML use

<input type="button" class="more" value="first" />
<input type="button" class="more" value="second" />

or apply to a html context:

input[type=button] {
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;
}

and in your HTML use

<input type="button" value="first" />
<input type="button" value="second" />

Changing Cursor of a Button

Add readonly attribute to your input.

#button {  cursor: pointer;  color: white;  background-color: #1c171c;  text-align: center;  border-radius: 10px;  width: 110px;  height: 40px;  font-size: 12px;  font-weight: bold;  cursor: pointer;  box-shadow: 7px 7px 6px black;}

<input id="button" value="Search for Books" onclick="website'" readonly />

disabling button on hover and click cursor not working

.btn {
    width:100px;
  height:40px;
  border-radius: 10px;
  border: none;
}

.btn1{
  cursor: pointer;
}

.btn2:disabled{
   
  cursor:not-allowed;
}

.btn-common {
  float: left;
  margin: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./common.css">
    <title>Button</title>
</head>

<body>
    <div class="root">
      <button class="btn-common btn btn1">Click me!</button>
      <button disabled class="btn-common btn btn2">Don't touch me!</button>
    </div>
</body>

</html>

How can I change the button border color dynamically?

Instead of a border you can use an inset box-shadow

example:

button {
  border:0;
  outline: 0;
  padding: 7px 10px;
  color:white;
  background: #32aae1;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2)
}

button:hover {
  filter: brightness(85%)
}

<button>My button!</button>

Border radius not applied to form's submit button

You'll probably have a better time not specifying any heights.

Also, you weren't really using flex - this is. (You can switch width for max-width if you like, or constrain search-input to have a min-width...)

#search-form {
  border: 1px solid #F2F2F2;
  border-radius: 13px;
  display: flex;
  width: 350px;
}

#location-icon {
  padding: 15px;
  border-radius: 13px 0px 0px 13px;
  background-color: #F2F2F2;
}

#search-input {
  border-width: 0px;
  background: none;
  padding: 15px;
  margin: 0;
  flex: 1;
}

#search-button {
  color: #fff;
  background-color: #0065FC;
  border-radius: 13px;
  border-width: 0px;
  padding: 15px;
  cursor: pointer;
}

<script src="https://kit.fontawesome.com/1f544e41e8.js" crossorigin="anonymous"></script>
<form id="search-form">
  <i id="location-icon" class="fa-solid fa-location-dot"></i>
  <input id="search-input" type="text" placeholder="Marseille, France" />
  <button id="search-button" type="submit">
      <i class="fa-solid fa-magnifying-glass"></i>
    </button>
</form>

Button Border Radius and Cursor