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.