Tutoriales en línea CodeW3C
Serie de tutoriales HTML
Scripts de navegador
Scripts de servidor
Tutoriales de programación
Serie de tutoriales XML
Manual de construcción de sitios
Manual de referencia
Horario de clases
Manual de referencia
Elementos HTML (orden alfabético)
Elementos HTML (orden de funcionalidad)
Compatibilidad del navegador HTML
Atributos globales de HTML
Eventos HTML
Nombres de colores HTML
Canvas HTML
Video/Audio HTML
Familia de caracteres HTML
Tipo de documento HTML
Códigos de URL HTML
Código de idioma HTML
Código de país HTML
Mensajes HTTP
Métodos HTTP
Atajos de teclado
Etiqueta HTML
<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<body>
<br>
<button>
<canvas>
-
<head>
<html>
</a></li> <li><a href="/es/tags/tag_img.html" title="Etiqueta <img> de HTML"><img></a></li> <li><a href="/es/tags/tag_input.html" title="Etiqueta <input> de HTML"><input></a></li> <li><a href="/es/tags/tag_ins.html" title="Etiqueta <ins> de HTML"><ins></a></li> <li><a href="/es/tags/tag_kbd.html" title="Etiqueta <kbd> de HTML"><kbd></a></li> <li><a href="/es/tags/tag_label.html" title="Etiqueta <label> de HTML"><label></a></li> <li><a href="/es/tags/tag_legend.html" title="Etiqueta <legend> de HTML"><legend></a></li> <li><a href="/es/tags/tag_li.html" title="Etiqueta <li> de HTML"><li></a></li> <li><a href="/es/tags/tag_link.html" title="Etiqueta <link> de HTML"><link></a></li> <li><a href="/es/tags/tag_main.html" title="Etiqueta <main> de HTML"><main></a></li> <li><a href="/es/tags/tag_map.html" title="Etiqueta <map> de HTML"><map></a></li> <li><a href="/es/tags/tag_mark.html" title="Etiqueta <mark> de HTML"><mark></a></li> <li><a href="/es/tags/tag_menu.html" title="Etiqueta <menu> de HTML"><menu></a></li> <li><a href="/es/tags/tag_meta.html" title="Etiqueta <meta> de HTML"><meta></a></li> <li><a href="/es/tags/tag_meter.html" title="Etiqueta <meter> de HTML"><meter></a></li> <li><a href="/es/tags/tag_nav.html" title="Etiqueta <nav> de HTML"><nav></a></li> <li><a href="/es/tags/tag_noframes.html" title="Etiqueta <noframes> de HTML"><noframes></a></li> <li><a href="/es/tags/tag_noscript.html" title="Etiqueta <noscript> de HTML"><noscript></a></li> <li><a href="/es/tags/tag_object.html" title="Etiqueta <object> de HTML"><object></a></li> <li><a href="/es/tags/tag_ol.html" title="Etiqueta <ol> de HTML"><ol></a></li> <li><a href="/es/tags/tag_optgroup.html" title="Etiqueta <optgroup> de HTML"><optgroup></a></li> <li><a href="/es/tags/tag_option.html" title="Etiqueta <option> de HTML"><option></a></li> <li><a href="/es/tags/tag_output.html" title="Etiqueta <output> de HTML"><output></a></li> <li><a href="/es/tags/tag_p.html" title="Etiqueta <p> de HTML"><p></a></li> <li><a href="/es/tags/tag_param.html" title="Etiqueta <param> de HTML"><param></a></li> <li><a href="/es/tags/tag_picture.html" title="Etiqueta <picture> de HTML"><picture></a></li> <li><a href="/es/tags/tag_pre.html" title="Etiqueta <pre> de HTML"><pre></a></li> <li><a href="/es/tags/tag_progress.html" title="Etiqueta <progress> de HTML"><progress></a></li> <li><a href="/es/tags/tag_q.html" title="Etiqueta <q> de HTML"><q></a></li> <li><a href="/es/tags/tag_rp.html" title="Etiqueta <rp> de HTML"><rp></a></li> <li><a href="/es/tags/tag_rt.html" title="Etiqueta <rt> de HTML"><rt></a></li> <li><a href="/es/tags/tag_ruby.html" title="Etiqueta <ruby> de HTML"><ruby></a></li> <li><a href="/es/tags/tag_s.html" title="Etiqueta <s> de HTML"><s></a></li> <li><a href="/es/tags/tag_samp.html" title="Etiqueta <samp> de HTML"><samp></a></li> <li><a href="/es/tags/tag_script.html" title="Etiqueta <script> de HTML"><script></a></li> <li><a href="/es/tags/tag_search.html" title="Etiqueta <search> de HTML"><search></a></li> <li><a href="/es/tags/tag_section.html" title="Etiqueta <section> de HTML"><section></a></li> <li><a href="/es/tags/tag_select.html" title="Etiqueta <select> de HTML"><select></a></li> <li><a href="/es/tags/tag_small.html" title="Etiqueta <small> de HTML"><small></a></li> <li><a href="/es/tags/tag_source.html" title="Etiqueta <source> de HTML"><source></a></li> <li><a href="/es/tags/tag_span.html" title="Etiqueta <span> de HTML"><span></a></li> <li><a href="/es/tags/tag_strike.html" title="Etiqueta <strike> de HTML"><strike></a></li> <li><a href="/es/tags/tag_strong.html" title="Etiqueta <strong> de HTML"><strong></a></li> <li><a href="/es/tags/tag_style.html" title="Etiqueta <style> de HTML"><style></a></li> <li><a href="/es/tags/tag_sub.html" title="Etiqueta <sub> HTML"><sub></a></li> <li><a href="/es/tags/tag_summary.html" title="Etiqueta <summary> HTML"><summary></a></li> <li><a href="/es/tags/tag_sup.html" title="Etiqueta <sup> HTML"><sup></a></li> <li><a href="/es/tags/tag_svg.html" title="Etiqueta <svg> HTML"><svg></a></li> <li><a href="/es/tags/tag_table.html" title="Etiqueta <table> HTML"><table></a></li> <li><a href="/es/tags/tag_tbody.html" title="Etiqueta <tbody> HTML"><tbody></a></li> <li><a href="/es/tags/tag_td.html" title="Etiqueta <td> HTML"><td></a></li> <li><a href="/es/tags/tag_template.html" title="Etiqueta <template> HTML"><template></a></li> <li><a href="/es/tags/tag_textarea.html" title="Etiqueta <textarea> HTML"><textarea></a></li> <li><a href="/es/tags/tag_tfoot.html" title="Etiqueta <tfoot> HTML"><tfoot></a></li> <li><a href="/es/tags/tag_th.html" title="Etiqueta <th> HTML"><th></a></li> <li><a href="/es/tags/tag_thead.html" title="Etiqueta <thead> HTML"><thead></a></li> <li><a href="/es/tags/tag_time.html" title="Etiqueta <time> HTML"><time></a></li> <li><a href="/es/tags/tag_title.html" title="Etiqueta <title> HTML"><title></a></li> <li><a href="/es/tags/tag_tr.html" title="Etiqueta <tr> HTML"><tr></a></li> <li><a href="/es/tags/tag_track.html" title="Etiqueta <track> HTML"><track></a></li> <li><a href="/es/tags/tag_tt.html" title="Etiqueta <tt> HTML"><tt></a></li> <li><a href="/es/tags/tag_u.html" title="Etiqueta <u> HTML"><u></a></li> <li><a href="/es/tags/tag_ul.html" title="Etiqueta <ul> HTML"><ul></a></li> <li><a href="/es/tags/tag_var.html" title="Etiqueta <var> HTML"><var></a></li> <li><a href="/es/tags/tag_video.html" title="Etiqueta <video> HTML"><video></a></li> <li><a href="/es/tags/tag_wbr.html" title="Etiqueta <wbr> HTML"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/es/howto/index.html" title="Caja de herramientas CodeW3C.com">Caja de herramientas CodeW3C.com</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>Etiqueta HTML <button></h1> <div class="prenextnav"> <ul> <li> Página anterior <a href="/es/tags/tag_br.html" title="Etiqueta HTML <br>"><br></a></li> <li> Página siguiente <a href="/es/tags/tag_canvas.html" title="Etiqueta HTML <canvas>"><canvas></a></li> </ul> </div> <div> <h2>定义和用法</h2> <p><code><button></code> 标签定义可点击的按钮。</p> <p>在 <code><button></code> 元素内部，您可以放置文本（以及像 <i>、<b>、<strong>、<br>、<img> 等标签）。这是用 <code><input></code> 元素创建的按钮所不能做到的！</p> <p class="tip"><span>Consejo:</span>Se debe especificar siempre <code><button></code> Elemento especificado <a href="/es/tags/att_button_type.html" title="Atributo type de la etiqueta <button> HTML">type</a>para informar al navegador qué tipo de botón es.</p> <p class="tip"><span>Consejo:</span>Puedes agregar estilos a los botones fácilmente con CSS. Consulta los ejemplos a continuación o visita nuestra <a href="/es/css/css3_buttons.html" title="Botones CSS">Tutorial de botones CSS</a>.</p> <h3>Descripción detallada</h3> <p><code><button></code> Control con <code><input type="button"></code> , ofrece funciones más potentes y un contenido más rico.<code><button></code> En comparación con <code></button></code> Todo el contenido entre las etiquetas es el contenido del botón, incluyendo cualquier contenido de texto aceptable, como texto o contenido multimedia. Por ejemplo, podemos incluir una imagen y el texto relacionado para crear un marcador de imagen atractivo en el botón.</p> <p>El único elemento prohibido es el mapa de imágenes, ya que las acciones sensibles al ratón y al teclado pueden interferir con el comportamiento de los botones del formulario.</p> <p>se debe especificar siempre para el botón <a href="/es/tags/att_button_type.html" title="Atributo type de la etiqueta <button> HTML">type</a>. El valor predeterminado de Internet Explorer para el atributo <code>"button"</code>mientras que en otros navegadores (incluidos los estándares W3C) el valor predeterminado es <code>"submit"</code>.</p> <h3>Véase también:</h3> <p>Manual de referencia del DOM HTML:<a href="/es/jsref/dom_obj_pushbutton.html" title="Objeto Button del DOM HTML">Objeto Button</a></p> <p>Tutorial de CSS:<a href="/es/css/css3_buttons.html" title="Botones CSS">Estilo del botón</a></p> </div> <div> <h2>Ejemplo</h2> <p>Marcar botones clicables así:</p> <pre class="language-css"> <button type="button">¡Haz clic aquí!</button> </pre> <p class="tiy"><a target="_blank" href="/es/tiy/t.html?f=tags_button_1">prueba por ti mismo</a></p> <p class="tip"><span>Consejo:</span>Más ejemplos en la parte inferior de la página.</p> </div> <div> <h2>Atributo</h2> <table class="dataintable"> <tr> <th style="width:20%;">Atributo</th> <th style="width:35%;">Valor</th> <th>Descripción</th> </tr> <tr> <td><a href="/es/tags/att_button_autofocus.html" title="Atributo autofocus de la etiqueta <button> HTML">autofocus</a></td> <td>autofocus</td> <td>Se especifica que el botón debe obtener el foco automáticamente al cargar la página.</td> </tr> <tr> <td><a href="/es/tags/att_button_disabled.html" title="Atributo disabled de la etiqueta <button> HTML">disabled</a></td> <td>disabled</td> <td>Se especifica que se debe desactivar el botón.</td> </tr> <tr> <td><a href="/es/tags/att_button_form.html" title="Atributo form de la etiqueta <button> HTML">form</a></td> <td><i>form_id</i></td> <td>Se especifica a qué formulario pertenece el botón.</td> </tr> <tr> <td><a href="/es/tags/att_button_formaction.html" title="Atributo formaction de la etiqueta <button> HTML">formaction</a></td> <td><i>URL</i></td> <td> <p>Se especifica a dónde se deben enviar los datos del formulario al enviarlo.</p> <p>Sólo se aplica cuando type="submit".</p> </td> </tr> <tr> <td><a href="/es/tags/att_button_formenctype.html" title="Atributo formenctype de la etiqueta <button> HTML">formenctype</a></td> <td> <ul> <li>application/x-www-form-urlencoded</li> <li>multipart/form-data</li> <li>text/plain</li> </ul> </td> <td> <p>Se especifica cómo se debe codificar los datos del formulario antes de enviarlos al servidor.</p> <p>Sólo se aplica cuando type="submit".</p> </td> </tr> <tr> <td><a href="/es/tags/att_button_formmethod.html" title="Atributo formmethod de la etiqueta <button> HTML">formmethod</a></td> <td> <ul> <li>get</li> <li>post</li> </ul> </td> <td> <p>Se especifica cómo enviar los datos del formulario (qué método HTTP usar).</p> <p>Sólo se aplica cuando type="submit".</p> </td> </tr> <tr> <td><a href="/es/tags/att_button_formnovalidate.html" title="Atributo formnovalidate de la etiqueta <button> HTML">formnovalidate</a></td> <td>formnovalidate</td> <td> <p>Se especifica que no se debe validar los datos del formulario al enviar.</p> <p>Sólo se aplica cuando type="submit".</p> </td> </tr> <tr> <td><a href="/es/tags/att_button_formtarget.html" title="Atributo formtarget de la etiqueta <button> HTML">formtarget</a></td> <td> <ul> <li></li> <li></li> <li></li> <li></li> <i>Nombre del cuadro de framework</i> </ul> </td> <td> <p>Se especifica dónde debe mostrar la respuesta después de enviar el formulario.</p> <p>Sólo se aplica cuando type="submit".</p> </td> </tr> <tr> <td><a href="/es/tags/att_button_name.html" title="Atributo name de la etiqueta <button> HTML">name</a></td> <td><i>Nombre</i></td> <td>Se especifica el nombre del botón.</td> </tr> <tr> <td><a href="/es/tags/att_button_popovertarget.html" title="Atributo popovertarget de la etiqueta <button> HTML">popovertarget</a></td> <td><i>element_id</i></td> <td>Se especifica el elemento del cuadro emergente que se debe llamar.</td> </tr> <tr> <td><a href="/es/tags/att_button_popovertargetaction.html" title="Atributo popovertargetaction de la etiqueta <button> HTML">popovertargetaction</a></td> <td> <ul> <li>hide</li> <li>show</li> <li>toggle</li> </ul> </td> <td>Define la acción que realiza el elemento de ventana emergente al hacer clic en el botón.</td> </tr> <tr> <td><a href="/es/tags/att_button_type.html" title="Atributo type de la etiqueta <button> HTML">type</a></td> <td> <ul> <li>button</li> <li>reset</li> <li>submit</li> </ul> </td> <td>Define el tipo del botón.</td> </tr> <tr> <td><a href="/es/tags/att_button_value.html" title="Atributo value de la etiqueta <button> HTML">value</a></td> <td><i>Texto</i></td> <td>Define el valor inicial del botón.</td> </tr> </table> </div> <div> <h2>Atributos globales</h2> <p><code><button></code> Los elementos de etiqueta también admiten <a href="/es/tags/html_ref_standardattributes.html" title="Atributos globales de HTML">Atributos globales en HTML</a>.</p> </div> <div> <h2>Atributos de eventos</h2> <p><code><button></code> Los elementos de etiqueta también admiten <a href="/es/tags/html_ref_eventattributes.html" title="Atributos de eventos HTML">Atributos de eventos en HTML</a>.</p> </div> <div> <h2>Configuración CSS predeterminada</h2> <p>Ninguno.</p> </div> <div> <h2>Más ejemplos</h2> <h3>Ejemplo 2</h3> <p>Establece el estilo de los botones utilizando CSS:</p> <pre class="language-html"> <!DOCTYPE html> <html> <head> <style> .button { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button1 {background-color: #4CAF50;} /* verde */ .button2 {background-color: #008CBA;} /* azul */ </style> </head> <body> <button class="button button1">verde</button> <button class="button button2">azul</button> </body> </html> </pre> <p class="tiy"><a target="_blank" href="/es/tiy/t.html?f=tags_button_css_1">prueba por ti mismo</a></p> <h3>Ejemplo 2</h3> <p>Establece el estilo de los botones utilizando CSS (con efecto al pasar el ratón):</p> <pre class="language-html"> <!DOCTYPE html> <html> <head> <style> .button { border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: black; border: 2px solid #4CAF50; } .button1:hover { background-color: #4CAF50; color: white; } .button2 { background-color: white; color: black; border: 2px solid #008CBA; } .button2:hover { background-color: #008CBA; color: white; } </style> </head> <body> <button class="button button1">verde</button> <button class="button button2">azul</button> </body> </html> </pre> <p class="tiy"><a target="_blank" href="/es/tiy/t.html?f=tags_button_css_2">prueba por ti mismo</a></p> </div> <div> <h2>soporte del navegador</h2> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>Chrome</td> <td>Edge</td> <td>Firefox</td> <td>Safari</td> <td>Opera</td> </tr> <tr> <td>Soporte</td> <td>Soporte</td> <td>Soporte</td> <td>Soporte</td> <td>Soporte</td> </tr> </table> </div> <div class="prenextnav"> <ul> <li> Página anterior <a href="/es/tags/tag_br.html" title="Etiqueta HTML <br>"><br></a></li> <li> Página siguiente <a href="/es/tags/tag_canvas.html" title="Etiqueta HTML <canvas>"><canvas></a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> Herramientas </center><h3> <h5 id="tools_reference"><a href="/es/tags/index.html">Manual de referencia HTML</a></h5> <h5 id="tools_example"><a href="/es/html/html_examples.html">Ejemplos HTML</a></h5> <h5 id="tools_quiz"><a href="/es/html/html_quiz.html">Pruebas HTML</a></h5> <h5 id="tools_tutorial"><a href="/es/html/index.html">Tutoriales HTML</a></h5> </div> <div><h3><center> Enlaces de patrocinadores </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> El contenido proporcionado por CodeW3C.com se ofrece únicamente para capacitación y prueba y no se garantiza la exactitud del contenido. Los riesgos asociados con el uso del contenido de este sitio no son responsabilidad del sitio. Todos los derechos reservados. </p> <p id="p2"> <a href="/es/about/index.html" title="Acerca de CodeW3C.com">Acerca de CodeW3C.com</a> <a href="/es/about/about_helping.html" title="Ayuda CodeW3C.com">Ayuda CodeW3C.com</a> <a href="/es/about/about_use.html" title="Acerca de uso">Términos de uso</a> <a href="/es/about/about_privacy.html" title="Acerca de privacidad">Términos de privacidad</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="Movido por Ce4e.com"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>