AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

Butoane în CSS


Next Page >>
HTML images

CSS Tutorial » Butoane în CSS

Butoanele sunt una dintre cele mai importante componente ale oric?rei pagini web ?i au multe st?ri ?i func?ii diferite care trebuie s? se potriveasc? corect deciziilor anterioare de proiectare.

În acest articol, vom aborda mentalitatea de proiectare cu trei butoane, împreun? cu codul CSS ?i instrumentele pentru a ajuta noii dezvoltatori s? î?i creeze propriile butoane.

Sintaxa:

.buton1 {
/* Defini?i propriet??ile aici */
proprietate:valoare;
}

 

 

Aplicare culori butonului CSS

Utiliza?i proprietatea de culoare de fundal background-color pentru a schimba culoarea de fundal a unui buton:

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
.boton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.boton2 {background-color: #008CBA;} /* Blue */
.boton3 {background-color: #f44336;} /* Red */
.boton4 {background-color: #e7e7e7; color: black;} /* Gray */
.boton5 {background-color: #555555;} /* Black */
</style>
</head>
<body>

<h2>Culori pentru butoane</h2>
<p>Schimba?i culoarea de fundal a unui buton cu proprietatea de culoare de fundal:</p>

<button class="boton">Verde</button>
<button class="boton boton2">Albastru</button>
<button class="boton boton3">Rosu</button>
<button class="boton boton4">Gri</button>
<button class="boton boton5">Negru</button>

</body>
</html>

Etichete: Buton în CSS, butoane în exemple css3 ?i html, cu imagini, buton make, centru, aliniere, muta?i butoanele în css

 

Dimensiuni butoane

Utiliza?i proprietatea font-size pentru a modifica dimensiunea fontului unui buton:

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
.boton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.boton2 {background-color: #008CBA; font-size: 18px} /* Blue */
.boton3 {background-color: #f44336; font-size: 22px} /* Red */
.boton4 {background-color: #e7e7e7; color: black; font-size: 28px} /* Gray */
.boton5 {background-color: #555555; font-size: 32px} /* Black */
</style>
</head>
<body>

<h2>Culori pentru butoane</h2>
<p>Schimba?i culoarea de fundal a unui buton cu proprietatea de culoare de fundal:</p>

<button class="boton">Verde</button>
<button class="boton boton2">Albastru_18px</button>
<button class="boton boton3">Rosu_22px</button>
<button class="boton boton4">Gri_28px</button>
<button class="boton boton5">Negru 2px</button>
</body>
</html>

 

Butoane cu col?uri rotunjite

Utiliza?i proprietatea border-radius pentru a ad?uga col?uri rotunjite la un buton:

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
.boton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.boton2 {background-color: #008CBA; font-size: 18px; border-radius: 8px;} /* Blue */
.boton3 {background-color: #f44336; font-size: 22px; border-radius: 14px;} /* Red */
.boton4 {background-color: #e7e7e7; color: black; font-size: 26px; border-radius: 26px;} /* Gray */
.boton5 {background-color: #555555; font-size: 32px; border-radius: 50px;} /* Black */
</style>
</head>
<body>

<h2>Butoane rotunjite</h2>
<p>Ad?uga?i col?uri rotunjite la un buton cu proprietatea border-radius:</p>

<button class="boton">Verde</button>
<button class="boton boton2">Albastru_18px</button>
<button class="boton boton3">Rosu_22px</button>
<button class="boton boton4">Grii_28px</button>
<button class="boton boton5">Negru 40px</button>
</body>
</html>

 

butoane exemple CSS3 ?i html

buton cu imagini

alinierea butoanelor CSS

Tags: Buton în CSS, butoane în exemple css3 ?i html, cu imagini, buton make, centru, aliniere. muta?i butoanele în css

butoane exemple CSS3 ?i html


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
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


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
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


analytics piwika