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.