Grupuri de butoane CSS
Această pagină acoperă grupurile de butoane CSS și butoanele animate.
Grup orizontal de butoane CSS
Pentru a crea un grup de butoane unul lângă altul, înfășurați-le într-un element container și setați display: flex; pe el. Adăugați flex-wrap: wrap; astfel încât butoanele să treacă pe o linie nouă pe ecrane mici.
Exemplu
Un grup orizontal de butoane folosind flexbox. Butoanele se schimbă în albastru dodgerblue la hover.
Prompt
Creează un grup de butoane orizontal folosind CSS flexbox. Plasează patru butoane verzi unul lângă altul într-un container flex cu flex-wrap activat. La hover, butoanele ar trebui să devină dodgerblue.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn-group {
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Horizontal Button Group</h2>
<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
</body>
</html>
Grup de butoane cu bordură CSS
Folosiți proprietatea border pentru a adăuga borduri butoanelor. Pentru a le face să arate ca un singur grup conectat, eliminați bordura din dreapta de la toate butoanele cu excepția ultimului, folosind selectorul :not(:last-child).
Exemplu
Prompt
Creează un grup orizontal de patru butoane cu bordură, cu o bordură solidă verde de 1px. Elimină bordura din dreapta de la toate butoanele cu excepția ultimului, folosind selectorul :not(:last-child), astfel încât să pară un grup conectat. La hover, schimbă culoarea de fundal.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn-group {
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #04AA6D;
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:not(:last-child) {
border-right: none;
}
.btn-group .button:hover {
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Bordered Button Group</h2>
<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
</body>
</html>
Grup vertical de butoane CSS
Pentru a crea un grup vertical de butoane, înfășurați butoanele într-un container și setați display: flex; cu flex-direction: column;. Acest lucru stivuiește butoanele unul deasupra celuilalt.
Exemplu
Prompt
Creează un grup de butoane vertical folosind CSS flexbox cu flex-direction setat pe column. Afișează patru butoane verzi stivuite unul peste altul. La hover, butoanele ar trebui să devină dodgerblue.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn-group {
display: flex;
flex-direction: column;
}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Vertical Button Group</h2>
<div class="btn-group" style="width: 200px;">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
</body>
</html>
Butoane animate CSS
Puteți adăuga animații și efecte de tranziție butoanelor folosind CSS.
Săgeată la hover
Adăugați o săgeată care alunecă la interior atunci când treceți mausul peste buton.
Prompt
Creează un buton care afișează o săgeată (») ce alunecă din dreapta la hover. Folosește un span în interiorul butonului pentru săgeată, cu tranziții CSS pentru opacitate și padding pentru a anima efectul.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #04AA6D;
border: none;
color: white;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>Animated Button - Arrow on Hover</h2>
<button class="button"><span>Hover </span></button>
</body>
</html>
Efect de apăsare
Adăugați un efect de "apăsare" atunci când butonul este apăsat.
Prompt
Creează un buton cu un efect de "apăsare" la click, folosind CSS. Butonul ar trebui să aibă un box-shadow, iar la click (:active), umbra este eliminată și butonul se deplasează ușor în jos folosind transform: translateY(4px).
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: white;
background-color: #04AA6D;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {
background-color: #048a5a;
}
.button:active {
background-color: #048a5a;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<h2>Animated Button - Pressed Effect</h2>
<button class="button">Click</button>
</body>
</html>
Apariție treptată la hover
Faceți butonul să apară treptat atunci când treceți mausul peste el.
Prompt
Creează un buton care apare treptat la hover. Începe cu butonul la jumătate din opacitate (0.5) și tranziționează la opacitate completă (1) la hover, folosind o tranziție CSS.
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: 16px 32px;
text-align: center;
font-size: 16px;
cursor: pointer;
opacity: 0.5;
transition: 0.3s;
}
.button:hover {
opacity: 1;
}
</style>
</head>
<body>
<h2>Animated Button - Fade In on Hover</h2>
<button class="button">Fade In</button>
</body>
</html>
Efect de undă (ripple)
Adăugați un efect de "undă" (ripple) atunci când butonul este apăsat.
Prompt
Creează un buton cu un efect ripple CSS la click. Folosește un pseudo-element ::after cu un fundal radial-gradient și o animație CSS care se mărește și dispare treptat la click pe buton.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
position: relative;
background-color: #04AA6D;
border: none;
font-size: 28px;
color: white;
padding: 20px;
width: 200px;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
</style>
</head>
<body>
<h2>Animated Button - Ripple Effect</h2>
<button class="button">Click</button>
</body>
</html>