css - pagina - Cómo hacer que el cursor cambie a la mano al desplazar una etiqueta<button>

crear botones en html y css

Question

Al ver mi sitio, el cursor solo cambia a la mano enguantada para las etiquetas <a> , no las etiquetas <button> . ¿Hay alguna razón para esto?

Aquí está mi código (las etiquetas de los botones tienen un ID de #more en css3).

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

Answer 1

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

por lo que necesita agregar: cursor:pointer;

En su caso use:

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

Esto aplicará el cursor al elemento con el ID "más" (solo se puede usar una vez). Así que en tu uso de HTML

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

Si desea aplicar esto a más de un botón, tiene más de una posibilidad:

usando CLASS

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

y en tu uso de HTML

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

o aplicar a un contexto html :

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

y en tu uso de HTML

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

Answer 2

Solo agrega este estilo:

cursor: pointer;

La razón por la que no sucede de forma predeterminada es porque la mayoría de los navegadores reservan el puntero solo para los enlaces (y quizás un par de otras cosas que estoy olvidando, pero generalmente no son los <button> s).

Más sobre la propiedad del cursor : https://developer.mozilla.org/en/CSS/cursor

Normalmente aplico esto a <button> y <label> por defecto.

NOTA : Acabo de atrapar esto:

las etiquetas de los botones tienen un id de #more

Es muy importante que cada elemento tenga su propia id única, no puede tener duplicados. Utilice el atributo de class lugar, y cambie su selector de #more a #more . En realidad, este es un error bastante común que es la causa de muchos problemas y preguntas que se hacen aquí. Cuanto antes aprendas a usar id , mejor.

Answer 3

Todo lo que necesitas es usar uno de los atributos de CSS, que es ---->

cursor: puntero

solo use esta propiedad en css, sin importar su línea o interna o externa

por ejemplo (para css en línea)

<form>
<input type="submit" style= "cursor:pointer" value="Button" name="Button">
</form>

Answer 4

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