Butoane în CSS
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:
/* 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:
<!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:
<!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:
<!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
butoane exemple CSS3 și html
This tool makes it easy to create, adjust, and experiment with custom colors for the web.

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

Find here examples of creative and unique website layouts.

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