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:

.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>