para - crear botones en html y css
Hacer botones-<botón> o<div>? (6)
Me pregunto qué elemento html usar para los botones en una página web. Me gustaría diseñar mis ''botones'' como Twitter. Por ejemplo:
el botón "más" en la parte inferior de la lista de tweets - ¿es ese un elemento <button> , o un elemento <div> ? Me gustaría saber qué usar. Creo que para <button> o <div> podemos suministrar estados de renovación y todo eso para que se vea agradable.
El botón "más" en Twitter es un <a> con una imagen de fondo, esquinas redondeadas CSS3 y un borde. Aquí está el CSS completo (elem es <a class="more round"> ):
.more {
outline: none;
display: block;
width: 100%;
padding: 6px 0;
text-align: center;
border: 1px solid #ddd;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
background-color: #fff;
background-repeat: repeat-x;
background-position: left top;
font-size: 14px;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
height: 22px;
line-height: 1.5em;
margin-bottom: 6px;
background-image: url(''/images/more.gif'');
}
.more:hover {
border: 1px solid #bbb;
text-decoration: none;
background-position: left -78px;
}
.more:active {
color: #666;
background-position: left -38px;
}
.round {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
<a href="#" class="more round">Sample Button</a>
Deberías usar <a> o <button> , no <div> .
En general, quiere usar <a> para navegación y <button> para alguna acción que tenga lugar en esa pantalla.
La mejor razón por la que se me ocurre preferir una etiqueta <button> o <a> a <anything-else> es que durante la prueba, facilita la localización de los elementos procesables. Yo uso Capybara y Rspec por ejemplo, y el método click_on funciona mucho más confiablemente cuando se refiere a un <button> , lo mismo con el método click_link y <a> .
Las otras razones dadas aquí también son buenas: semántica, lectores de pantalla, etc.
Pragmáticamente, tu audiencia decidirá si cada elemento de tu página es realmente un <div> elegante o si quieres jugar bien con el resto del ecosistema de desarrollo web. Simplemente puede depender de si su audiencia utiliza el navegador X o no.
Una cosa: como un <button> podría enviar un formulario o <a> llevarlo a otra página, debe asegurarse de evitar esas acciones predeterminadas. En la función de JavaScript que maneja el clic, debe especificar que solo realiza la acción que programa.
function onClickEvent(e)
{
e.preventDefault();
// What you want to do instead
}
No use etiquetas <div> para hacer elementos en los que se pueda hacer clic. Use los elementos <a> o <button> . Esto permite que los navegadores con JavaScript deshabilitados interactúen con ellos como se esperaba. Incluso si su funcionalidad requiere JavaScript y no hay un comportamiento predeterminado razonable que pueda asignar a un <a> , utilícelo independientemente: transmite una semántica "seleccionable".
En general, elija la etiqueta que mejor describa la función de su contenido, no la apariencia de su contenido, y evite etiquetas <div> innecesarias para que sus documentos no sufran de divitis .
Si desea utilizar <div> lugar de un <button> para el editor WYSIWYG o algo así, no olvide agregar estilos a continuación, porque una etiqueta <button> no elimina la selección, pero div lo hace.
O te sorprenderá con un comportamiento inesperado :)
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Sugeriría <input id="Button1" type="button" value="button" /> con un estilo css para darle la apariencia que está buscando.
Use una etiqueta a en lugar de button . Mi razonamiento implica problemas de compatibilidad con la versión anterior de IE (IE6 odia la etiqueta del button ).