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>