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.