Tutorial
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>.
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>
Online Editor
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.