HTML buton - onclick

Cum se creează un buton HTML
Eticheta <button> este utilizată pentru a crea butoane cu clic pe pagina web. Diferența dintre aceste elemente și butoane create cu eticheta <input> este că puteți plasa conținutul (imagini sau text) în interiorul <button>.

Sintaxă:
Eticheta <button> vine în perechi, conținutul este scris între etichetele deschidere
(<button>) și închidere (</button>).

Exemplu:

<!DOCTYPE html>
<html> 
  <head> 
     <title>Cum se creează un buton HTML</title>
<style>
.btn {

border: none;

background-color: inherit;

padding: 14px 28px;

font-size: 16px;

cursor: pointer;

display: inline-block;

}

/* On mouse-over */

.btn:hover {background: #eee;}

.success {color: green;}

.info {color: dodgerblue;}

.warning {color: orange;}

.danger {color: red;}

.default {color: black;}

</style>
  </head>
<body>
	<h1> Aici va fi butonul nostru </h1>

	<button type = "button"> Faceți clic pe </button>

    <button class="btn success">Success</button>

	<button class="btn info">Informatii</button>

	<button class="btn warning">Atentie</button>

	<button class="btn danger">Pericol</button>

	<button class="btn default">Default</button>

</body>

 </html>

HTML button onclick

Atributul onclick se declanșează cu un clic de mouse pe element.

Exemplu 2:

<!DOCTYPE html>
<html> 
  <head> 
     <title>HTML button onclick</title>

 <style>

	h1 {color: green;}

</style>

  </head>

<body>
<h1>HTML button onclick</h1>

  <button onclick="Functia_mea()">Click me</button>

<p id="demonstratie"></p>

<p>O funcție este declanșată la apăsarea butonului.

 Funcția emite un text într-un element p cu  id="demonstratie".</p>

<script>

  function Functia_mean() {

  document.getElementById("demonstratie").innerHTML = "Cursuri online HTML";

  }

  </script>

</body>

</html>

Link-uri cu butoanele HTML

Cum să faceți link-uri cu butoanele HTML onclick href și cum să le stilați cu CSS.
Acesta este un exemplu de mod de a stila o legătură de buton cu CSS inline. Codul

Exemplu 3:

<!DOCTYPE html>
<html>
  <head>
     <title>Link-uri cu butoanele HTML</title>

  </head>

<body>

<h1>Link-uri cu butoanele HTML</h1>

<button onclick="window.location.href = 'https://ro.agernic.com/ro';">Click Here</button>
<br />

<form>

	<input style="width: 300px; padding: 20px;

   cursor: pointer; box-shadow: 6px 6px 5px; #999; -webkit-box-shadow: 6px 6px 5px #999;

  -moz-box-shadow: 6px 6px 5px #999; font-weight: bold; background: #ffff00;

   color: #000; border-radius: 10px; border: 1px solid #999; font-size: 150%;"

   type="button" value="Put Your Text Here"

   onclick="window.location.href='https://www.agernic.com/ro/html/css-in-html.php'" />

 </form>

</body>

</html>

Tags: HTML buton, onclick, link, exemple

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.