Stilizarea butoanelor CSS
Butoanele HTML pot avea multe înfățișări diferite odată ce aplici CSS.
Aceste proprietăți fac cea mai mare parte a muncii:
background-color— umple butonul cu o culoare de fundalcolor— colorează textul butonuluiborder— desenează linia din jurul butonuluipadding— controlează spațiul dintre text și bordurăborder-radius— rotunjește colțurile butonuluibox-shadow— îi dă butonului o umbrătext-align— pune textul butonului în centrufont-size— controlează cât de mare apare textul butonuluitext-decoration— elimină sublinierea atunci când un element<a>are rol de butoncursor— schimbă cursorul mausului cât timp stă deasupra butonului
De obicei, trei elemente au rol de buton: <button>, <input type="button"> și un <a> stilizat ca un buton.
Stilizare de bază a butoanelor CSS
Orice element HTML poate trece drept buton dacă are câteva proprietăți CSS: o culoare de fundal, puțin padding, o culoare a textului și fără bordura implicită.
Exemplu
Stilizare de bază a butonului, arătată pe diferite elemente HTML:
Prompt
Creează o pagină care afișează un buton nestilizat implicit și un buton stilizat cu CSS, unul lângă altul. Butonul stilizat ar trebui să aibă fundal roșu, text alb, fără bordură, padding 15px 32px, text centrat, fără decorare de text, display inline-block, dimensiune font 16px și cursor pointer. Folosește un element pentru cel implicit și un element pentru cel stilizat.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: red;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>CSS Styling Buttons</h2>
<button>Default Button</button>
<a href="#" class="button">CSS Button</a>
</body>
</html>
Culorile butoanelor CSS
Două proprietăți se ocupă aici de culoare: background-color pentru ce se află în spatele textului și color pentru textul însuși.
Exemplu
Aici, fiecare buton are o culoare de fundal diferită:
Prompt
Creează o pagină cu cinci butoane pe un rând, fiecare cu o culoare de fundal diferită: verde (#04AA6D), albastru (#008CBA), roșu (#f44336), gri (#e7e7e7 cu text negru) și negru (#555555). Toate butoanele au un stil de bază cu text alb, fără bordură, padding 15px 32px, text centrat, dimensiune font 16px și cursor pointer.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button2 {background-color: #008CBA;}
.button3 {background-color: #f44336;}
.button4 {background-color: #e7e7e7; color: black;}
.button5 {background-color: #555555;}
</style>
</head>
<body>
<h2>Button Colors</h2>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
Dimensiunile butoanelor CSS
Dimensiunea vine din două proprietăți. font-size scalează textul de pe buton, iar padding reglează cât spațiu rămâne între acel text și bordură.
Butoane cu dimensiune font
Dimensiunea fontului se schimbă de la un buton la altul:
Prompt
Creează o pagină cu cinci butoane care arată dimensiuni diferite de font: 10px, 12px, 16px, 20px și 24px. Toate butoanele au un stil de bază cu fundal verde (#04AA6D), text alb, fără bordură, padding 15px 32px, text centrat și cursor pointer.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>Button Sizes</h2>
<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>
</body>
</html>
Butoane cu padding
Aici diferă valoarea de padding:
Prompt
Creează o pagină cu cinci butoane care arată valori diferite de padding: 10px 24px, 12px 28px, 14px 40px, 32px 16px și 16px. Toate butoanele au un stil de bază cu fundal verde (#04AA6D), text alb, fără bordură, text centrat, dimensiune font 16px și cursor pointer.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
</style>
</head>
<body>
<h2>Button Padding</h2>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
<button class="button button3">14px 40px</button>
<button class="button button4">32px 16px</button>
<button class="button button5">16px</button>
</body>
</html>
Butoane rotunjite CSS
Folosește border-radius pentru a rotunji colțurile unui buton.
Exemplu
Colțuri rotunjite în grade diferite:
Prompt
Creează o pagină cu cinci butoane care arată valori diferite de border-radius: 2px, 4px, 8px, 12px și 50%. Toate butoanele au un stil de bază cu fundal verde (#04AA6D), text alb, fără bordură, padding 15px 32px, text centrat, dimensiune font 16px și cursor pointer.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>
<h2>Rounded Buttons</h2>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
</body>
</html>
Bordurile butoanelor CSS
Bordura unui buton este dată de proprietatea border.
Exemplu
Stilul bordurii se schimbă de la un buton la altul:
Prompt
Creează o pagină cu cinci butoane care arată stiluri diferite de bordură: 2px solidă verde (#04AA6D), 2px punctată albastru (#008CBA), 2px întreruptă roșu (#f44336), 1px solidă gri (#e7e7e7) și 1px solidă gri închis (#555555). Toate butoanele au un stil de bază cu fundal alb, text colorat asortat cu bordura, padding 15px 32px, text centrat, dimensiune font 16px și cursor pointer.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: white;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button1 {border: 2px solid #04AA6D; color: #04AA6D;}
.button2 {border: 2px dotted #008CBA; color: #008CBA;}
.button3 {border: 2px dashed #f44336; color: #f44336;}
.button4 {border: 1px solid #e7e7e7; color: black;}
.button5 {border: 1px solid #555555; color: #555555;}
</style>
</head>
<body>
<h2>Button Borders</h2>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>