HTML button, neboli tlačítko, lze definovat pomocí tagu <button>, přičemž lze do tohoto tagu vložit další elementy a tím tlačítko přizpůsobit.
<button type="button">Klikněte na button</button>
Do HTML tlačítka lze přidat skriptem odkaz.
<button onclick="document.location='https://www.smuton.cz/'">Přejít na home page Smuton.cz</button>
Button lze přizpůsobit pomocí CSS tagu <style> v části <head>.
<!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: #B85151;} /* Červená */ .button2 {background-color: #0A5493;} /* Modrá */ </style> </head> <body> <h1>Nadpis H1 - přizpůsobení tlačítek pomocí CSS</h1> <p>Díky CSS lze upravit tlačítko. Toto je běžný odstavec.</p> <button class="button button1">Green</button> <button class="button button2">Blue</button> </body> </html>
Stylování tlačítka pomocí CSS.
<!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 #E88E8E; } .button1:hover { background-color: #B85151; /* Barva po najetí myši na tlačítko. */ color: white; } .button2 { background-color: white; color: black; border: 2px solid #81D9C1; } .button2:hover { background-color: #0A5493; /* Barva po najetí myši na tlačítko. */ color: white; } </style> </head> <body> <h1>Nadpis H1 - přizpůsobení tlačítek pomocí CSS</h1> <p>Díky CSS lze upravit talčítko. Toto je běžný odstavec.</p> <button class="button button1">Green</button> <button class="button button2">Blue</button> </body> </html>