Efecte de hover pentru butoane CSS
Pe lângă efectele de hover, această pagină tratează și umbrele butoanelor, stările dezactivate și lățimea.
Butoane CSS cu efect hover
Când muți mausul peste un buton, îi poți schimba stilul cu ajutorul pseudo-clasei :hover.
Sfat: Viteza acestei schimbări depinde de proprietatea transition-duration.
Exemplu
Aici, fiecare buton trece lin la noua sa culoare la hover.
Prompt
Creează o pagină cu cinci butoane (Verde, Albastru, Roșu, Gri, Negru) care își schimbă culoarea de fundal la hover. Folosește proprietatea CSS transition-duration setată la 0.4s pentru un efect de hover fluid.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoverable Buttons</title>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.green:hover { background-color: #4CAF50; color: white; }
.blue { border-color: #008CBA; }
.blue:hover { background-color: #008CBA; color: white; }
.red { border-color: #f44336; }
.red:hover { background-color: #f44336; color: white; }
.grey { border-color: #e7e7e7; }
.grey:hover { background-color: #e7e7e7; }
.black { border-color: #555555; }
.black:hover { background-color: #555555; color: white; }
</style>
</head>
<body>
<h2>Hoverable Buttons</h2>
<button class="button green">Green</button>
<button class="button blue">Blue</button>
<button class="button red">Red</button>
<button class="button grey">Grey</button>
<button class="button black">Black</button>
</body>
</html>
Butoane CSS cu umbră
Umbrele butoanelor provin din proprietatea box-shadow.
Exemplu
Dintre aceste două butoane, unul are umbra permanent, iar celălalt o primește doar la hover.
Prompt
Creează o pagină cu două butoane: unul cu box-shadow permanent și unul care arată box-shadow doar la hover. Folosește rgba(0,0,0,0.6) pentru culoarea umbrei.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons With Shadow</title>
<style>
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; margin: 4px 2px; cursor: pointer; }
.button1 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6); }
.button2:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6); }
</style>
</head>
<body>
<h2>Buttons With Shadow</h2>
<button class="button button1">Shadow Button</button>
<button class="button button2">Shadow on hover</button>
</body>
</html>
Buton dezactivat CSS
Dacă reduci opacity, un buton pare parțial transparent, iar acest aspect este înțeles ca „dezactivat”.
Sfat: La trecerea mausului peste buton apare un „semn de parcare interzisă” dacă setezi și cursor la not-allowed.
Exemplu
Aici, opacity și cursor lucrează împreună ca un buton să pară dezactivat.
Prompt
Creează o pagină cu un buton normal și unul care arată ca fiind dezactivat. Butonul dezactivat ar trebui să folosească opacity 0.6 și cursor not-allowed pentru a indica faptul că nu poate fi apăsat.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button</title>
<style>
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; cursor: pointer; }
.disabled { opacity: 0.6; cursor: not-allowed; }
</style>
</head>
<body>
<h2>Disabled Button</h2>
<button class="button">Normal Button</button>
<button class="button disabled">Disabled Button</button>
</body>
</html>
Lățimea butonului CSS
Butoanele își iau în mod normal dimensiunea din text. Pentru a alege în schimb o lățime anume, setează proprietatea width.
Sfat: Un procent, de exemplu 50% din elementul părinte, păstrează lățimea responsive, în timp ce pixelii o țin fixă.
Exemplu
Trei lățimi de buton de comparat: 250px, 50% și 100%.
Prompt
Creează o pagină cu trei butoane stivuite vertical, fiecare cu o lățime diferită: 250px, 50% și 100%. Arată cum proprietatea CSS width controlează dimensiunea butonului.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Width</title>
<style>
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; margin: 4px 0; cursor: pointer; display: block; }
.button1 { width: 250px; }
.button2 { width: 50%; }
.button3 { width: 100%; }
</style>
</head>
<body>
<h2>Button Width</h2>
<button class="button button1">250px</button>
<button class="button button2">50%</button>
<button class="button button3">100%</button>
</body>
</html>
Buton pe imagine
Exemplu
Poziționarea CSS plasează acest buton deasupra unei imagini.
Prompt
Creează o pagină cu un container ce conține o imagine și un buton centrat suprapus peste ea. Folosește poziționarea CSS pentru a plasa butonul în mijlocul imaginii.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button on Image</title>
<style>
.container { position: relative; width: 100%; max-width: 400px; }
.container img { width: 100%; height: auto; }
.btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #4CAF50; color: white; font-size: 16px; padding: 12px 24px; border: none; cursor: pointer; border-radius: 5px; }
.btn:hover { background-color: #46a049; }
</style>
</head>
<body>
<h2>Button on Image</h2>
<div class="container">
<img src="img_snow.jpg" alt="Snow">
<button class="btn">Button</button>
</div>
</body>
</html>